@windrun-huaiin/third-ui 7.6.1 → 10.0.0

package/src/main/money-price/money-price-button.tsx

@@ -4,88 +4,241 @@ import { cn } from '@windrun-huaiin/lib/utils';
 import { UserState, type MoneyPriceButtonProps } from './money-price-types';
 import React, { useState } from 'react';
 
-function capitalize(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
 
 export function MoneyPriceButton({
   planKey,
   userContext,
   billingType,
-  onLogin,
-  onUpgrade,
+  onAuth,
+  onAction,
   texts,
-  isProcessing = false
+  isProcessing = false,
+  isInitLoading = false,
+  enableSubscriptionUpgrade = true
 }: MoneyPriceButtonProps) {
+
+  if (isInitLoading) {
+    return (
+      <div
+        className="w-full h-11 md:h-12 mt-4 md:mt-auto rounded-full bg-transparent"
+        aria-hidden="true"
+        data-plan-button-placeholder={planKey}
+      />
+    );
+  }
+
   const { isAuthenticated, subscriptionStatus } = userContext;
   const [isLoading, setIsLoading] = useState(false);
-  
-  // 决定按钮显示和行为
-  const getButtonConfig = () => {
+  const subscriptionBilling = userContext.subscriptionType;
+  const planTier = planKey;
+  const planBilling = billingType;
+
+  const getPlanRank = (tier: 'F1' | 'P2' | 'U3', billing: string) => {
+    if (tier === 'F1') return 0;
+    if (tier === 'P2') return billing === 'monthly' ? 1 : 3;
+    if (tier === 'U3') return billing === 'monthly' ? 2 : 4;
+    return 0;
+  };
+
+  // OneTime 模式的按钮配置
+  const getOnetimeButtonConfig = () => {
+    // 匿名用户：所有卡片都显示登录按钮
+    if (!isAuthenticated) {
+      return {
+        text: texts.getStarted,
+        onClick: onAuth,
+        disabled: false,
+        hidden: false
+      };
+    }
+
+    if (subscriptionStatus === UserState.Anonymous) {
+        // 已登录但状态未知 → 视为 FreeUser
+        console.warn('Clerk is authed OK but user is anonymous!');
+        return { text: '', disabled: true, hidden: true };
+    }
+
+    // 登录用户：OneTime 模式下所有卡片都显示购买积分按钮
+    return {
+      text: texts.buyCredits || texts.upgrade,
+      onClick: () => onAction(planKey, billingType),
+      disabled: false,
+      hidden: false
+    };
+  };
+
+  // 订阅模式的按钮配置
+  const getSubscriptionButtonConfig = () => {
     // 匿名用户
     if (!isAuthenticated) {
-      const textKey = planKey === 'free' ? 'getStarted' : `get${capitalize(planKey)}`;
+      const getButtonText = () => {
+        switch (planKey) {
+          case 'F1':
+            return texts.getStarted;
+          case 'P2':
+            return texts.getPro;
+          case 'U3':
+            return texts.getUltra;
+          default:
+            return texts.getStarted;
+        }
+      };
+
       return {
-        text: texts[textKey as keyof typeof texts] || texts.getStarted,
-        onClick: onLogin,
+        text: getButtonText(),
+        onClick: onAuth,
         disabled: false,
         hidden: false
       };
     }
-    
+
     // 已登录用户
     switch (subscriptionStatus) {
-      case UserState.FreeUser:
-        if (planKey === 'free') {
-          return { 
-            text: texts.currentPlan, 
-            disabled: true, 
-            hidden: false
-          };
-        }
-        const getFreeUserText = planKey === 'pro' ? texts.getPro : texts.getUltra;
-        return {
-          text: getFreeUserText,
-          onClick: () => onUpgrade(planKey, billingType),
-          disabled: false,
-          hidden: false
-        };
-        
-      case UserState.ProUser:
-        if (planKey === 'free') return { hidden: true };
-        if (planKey === 'pro') {
-          return { 
-            text: texts.currentPlan, 
-            disabled: true, 
+      case UserState.FreeUser: {
+        if (planTier === 'F1') {
+          return {
+            text: texts.currentPlan,
+            disabled: true,
             hidden: false
           };
         }
         return {
           text: texts.upgrade,
-          onClick: () => onUpgrade('ultra', billingType),
+          onClick: () => onAction(planTier, planBilling),
           disabled: false,
           hidden: false
         };
+      }
+
+      case UserState.ProUser: {
+        // 不允许降级到 Free
+        if (planTier === 'F1') {
+          return { hidden: true };
+        }
+
+        const currentBilling = subscriptionBilling === 'yearly' ? 'yearly' : 'monthly';
+        const currentRank = getPlanRank('P2', currentBilling);
+
+        if (planTier === 'P2') {
+          const targetRank = getPlanRank('P2', planBilling);
+
+          if (planBilling === currentBilling) {
+            return {
+              text: texts.currentPlan,
+              disabled: true,
+              hidden: false
+            };
+          }
+
+          if (targetRank > currentRank) {
+            return {
+              text: texts.upgrade,
+              onClick: () => onAction('P2', planBilling),
+              disabled: false,
+              hidden: false
+            };
+          }
+
+          return { hidden: true };
+        }
+
+        if (planTier === 'U3') {
+          const targetRank = getPlanRank('U3', planBilling);
+          if (targetRank > currentRank) {
+            return {
+              text: texts.upgrade,
+              onClick: () => onAction('U3', planBilling),
+              disabled: false,
+              hidden: false
+            };
+          }
+
+          return { hidden: true };
+        }
         
-      case UserState.UltraUser:
-        if (planKey !== 'ultra') return { hidden: true };
-        return { 
-          text: texts.currentPlan, 
-          disabled: true, 
-          hidden: false
-        };
-        
+        return { hidden: true };
+      }
+
+      case UserState.UltraUser: {
+        const currentBilling = subscriptionBilling === 'yearly' ? 'yearly' : 'monthly';
+        const currentRank = getPlanRank('U3', currentBilling);
+
+        if (planTier === 'F1') {
+          return { hidden: true };
+        }
+
+        if (planTier === 'P2') {
+          const targetRank = getPlanRank('P2', planBilling);
+          if (targetRank > currentRank) {
+            return {
+              text: texts.upgrade,
+              onClick: () => onAction('P2', planBilling),
+              disabled: false,
+              hidden: false
+            };
+          }
+          return { hidden: true };
+        }
+
+        if (planTier === 'U3') {
+          const targetRank = getPlanRank('U3', planBilling);
+
+          if (planBilling === currentBilling) {
+            return {
+              text: texts.currentPlan,
+              disabled: true,
+              hidden: false
+            };
+          }
+
+          if (targetRank > currentRank) {
+            return {
+              text: texts.upgrade,
+              onClick: () => onAction('U3', planBilling),
+              disabled: false,
+              hidden: false
+            };
+          }
+        }
+
+        return { hidden: true };
+      }
+
       default:
+        // 已登录但状态未知 → 视为 FreeUser
+        console.warn('Clerk is authed OK but user is anonymous!');
         return { text: '', disabled: true, hidden: true };
     }
   };
-  
+
+  // 主要的按钮配置函数
+  const getButtonConfig = () => {
+    if (billingType === 'onetime') {
+      return getOnetimeButtonConfig();
+    }
+    return getSubscriptionButtonConfig();
+  };
+
   const config = getButtonConfig();
   
   if (config.hidden) return null;
 
+  if (
+    !enableSubscriptionUpgrade &&
+    billingType !== 'onetime' &&
+    config.text === texts.upgrade &&
+    typeof config.onClick === 'function'
+  ) {
+    return null;
+  }
+
+  const isBusy = isLoading || isProcessing;
+  const isDisabled = config.disabled || isBusy;
+  const displayText = isBusy ? 'Processing...' : config.text;
+  const isDisabledByConfigOnly = config.disabled && !isBusy;
+
   const handleClick = async (e: React.MouseEvent) => {
-    if (config.disabled || isLoading || isProcessing) {
+    if (isDisabled) {
       e.preventDefault();
       return;
     }
@@ -106,17 +259,19 @@ export function MoneyPriceButton({
     }
   };
 
-  const isDisabled = config.disabled || isLoading || isProcessing;
-  const displayText = isLoading ? 'Processing...' : config.text;
-  
+  const buttonClassName = cn(
+    'w-full h-11 md:h-12 px-5 md:px-8 mt-4 md:mt-auto inline-flex items-center justify-center text-white text-sm md:text-base font-bold tracking-wide shadow-md hover:shadow-lg transition-all duration-300 rounded-full',
+    isDisabledByConfigOnly
+      ? 'bg-gray-400 cursor-not-allowed'
+      : 'bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600',
+    !isDisabledByConfigOnly && !isBusy &&
+      'hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700',
+    isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed'
+  );
+
   return (
     <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',
-        isDisabled
-          ? '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'
-      )}
+      className={buttonClassName}
       disabled={isDisabled}
       onClick={handleClick}
       type="button"
@@ -125,4 +280,4 @@ export function MoneyPriceButton({
       {displayText}
     </button>
   );
-}
+}

package/src/main/money-price/money-price-config-util.ts

@@ -5,19 +5,236 @@
 
 import type { MoneyPriceConfig, PaymentProviderConfig, EnhancePricePlan } from './money-price-types';
 
-// 辅助函数：获取当前激活的支付供应商配置
-export function getActiveProviderConfig(config: MoneyPriceConfig): PaymentProviderConfig {
+/**
+ * 获取当前激活的支付供应商配置
+ *
+ * 🔒 安全设计：
+ * - util层负责从config中提取激活的provider配置
+ * - 只返回提取的结果，不暴露任何config结构
+ * - 调用方（应用层）通过wrapper隐藏config对象
+ *
+ * @param config - MoneyPriceConfig对象（由应用层提供）
+ * @returns 当前激活的支付供应商配置
+ */
+export function getActiveProviderConfigUtil(config: MoneyPriceConfig): PaymentProviderConfig {
   const provider = config.activeProvider;
   return config.paymentProviders[provider];
 }
 
 // 辅助函数：获取特定产品的价格信息
 export function getProductPricing(
-  productKey: 'free' | 'pro' | 'ultra',
-  billingType: 'monthly' | 'yearly',
+  productKey: 'F1' | 'P2' | 'U3',
+  billingType: string,
   provider: string,
   config: MoneyPriceConfig
 ): EnhancePricePlan {
   const providerConfig = config.paymentProviders[provider];
-  return providerConfig.products[productKey].plans[billingType];
+
+  // 如果是 onetime 类型，尝试从积分包中获取
+  if (billingType === 'onetime') {
+    const creditPacks = providerConfig.creditPackProducts;
+    // 直接使用相同的 key：F1->F1, P2->P2, U3->U3
+    if (creditPacks && creditPacks[productKey]) {
+      const pack = creditPacks[productKey];
+      return {
+        priceId: pack.priceId,
+        amount: pack.amount,
+        currency: pack.currency,
+        credits: pack.credits
+      };
+    }
+  }
+
+  // 否则从订阅产品中获取
+  const products = providerConfig.subscriptionProducts || providerConfig.products;
+  if (products && products[productKey] && products[productKey].plans[billingType]) {
+    return products[productKey].plans[billingType];
+  }
+
+  throw new Error(`Product pricing not found for ${productKey} ${billingType}`);
+}
+
+// ============ 安全的util函数 - 只接收简单的映射表参数，不暴露任何config细节 ============
+
+/**
+ * 根据 priceId 获取对应的积分数量
+ *
+ * 🔒 安全设计：
+ * - util层负责解析config，提取所需数据
+ * - 只返回查询结果，不暴露任何config结构
+ * - 调用方（应用层）通过wrapper隐藏config对象
+ *
+ * @param priceId - 查询的价格ID
+ * @param config - MoneyPriceConfig对象（由应用层提供）
+ * @returns 对应的积分数量，或null
+ */
+export function getCreditsFromPriceIdUtil(
+  priceId: string | undefined,
+  config: MoneyPriceConfig
+): number | null {
+  if (!priceId) {
+    return null;
+  }
+
+  // 遍历所有支付提供商
+  for (const provider of Object.values(config.paymentProviders)) {
+    // 遍历订阅产品
+    const subscriptionProducts = (
+      provider.subscriptionProducts || provider.products
+    ) as Record<string, any>;
+
+    if (subscriptionProducts) {
+      for (const product of Object.values(subscriptionProducts)) {
+        if (product.plans) {
+          for (const planConfig of Object.values(product.plans)) {
+            const plan = planConfig as any;
+            if (plan.priceId === priceId && plan.credits !== undefined) {
+              return plan.credits;
+            }
+          }
+        }
+      }
+    }
+
+    // 遍历积分包产品
+    const creditPacks = provider.creditPackProducts as Record<string, any>;
+    if (creditPacks) {
+      for (const pack of Object.values(creditPacks)) {
+        const packTyped = pack as any;
+        if (packTyped.priceId === priceId && packTyped.credits !== undefined) {
+          return packTyped.credits;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 根据查询参数获取价格配置
+ *
+ * 支持三种查询方式：
+ * 1. 按 priceId 直接查询
+ * 2. 按 plan + billingType 查询
+ * 3. 按 plan 查询
+ *
+ * 🔒 安全设计：
+ * - util层负责解析config，提取和匹配数据
+ * - 只返回查询结果，不暴露任何config结构
+ * - 调用方（应用层）通过wrapper隐藏config对象
+ *
+ * @param priceId - 查询的价格ID（可选）
+ * @param plan - 查询的套餐名称如'P2'、'U3'（可选）
+ * @param billingType - 查询的计费类型如'monthly'、'yearly'（可选）
+ * @param config - MoneyPriceConfig对象（由应用层提供）
+ * @returns 匹配的价格配置，包含计算好的元数据（priceName、description、interval）
+ */
+export function getPriceConfigUtil(
+  priceId: string | undefined,
+  plan: string | undefined,
+  billingType: string | undefined,
+  config: MoneyPriceConfig
+): (EnhancePricePlan & { priceName: string; description: string; interval?: string }) | null {
+  // 遍历所有支付提供商
+  for (const provider of Object.values(config.paymentProviders)) {
+    // 遍历订阅产品
+    const subscriptionProducts = (
+      provider.subscriptionProducts || provider.products
+    ) as Record<string, any>;
+
+    if (subscriptionProducts) {
+      for (const [productKey, product] of Object.entries(subscriptionProducts)) {
+        if (product.plans) {
+          for (const [billingKey, planConfig] of Object.entries(product.plans)) {
+            const plan_config = planConfig as any;
+
+            // 匹配逻辑：按优先级尝试
+            // 1. 按priceId精确匹配（优先级最高）
+            if (priceId && plan_config.priceId === priceId) {
+              return {
+                ...plan_config,
+                priceName: `${productKey} ${billingKey}`,
+                description: `${productKey} plan - ${billingKey} billing`,
+                interval: billingKey === 'yearly' ? 'year' : 'month',
+              };
+            }
+
+            // 2. 按plan和billingType同时匹配
+            if (!priceId && plan && billingType) {
+              if (productKey === plan && billingKey === billingType) {
+                return {
+                  ...plan_config,
+                  priceName: `${productKey} ${billingKey}`,
+                  description: `${productKey} plan - ${billingKey} billing`,
+                  interval: billingKey === 'yearly' ? 'year' : 'month',
+                };
+              }
+            }
+
+            // 3. 按plan匹配（billingType为空时）
+            if (!priceId && !billingType && plan && productKey === plan) {
+              return {
+                ...plan_config,
+                priceName: `${productKey} ${billingKey}`,
+                description: `${productKey} plan - ${billingKey} billing`,
+                interval: billingKey === 'yearly' ? 'year' : 'month',
+              };
+            }
+          }
+        }
+      }
+    }
+
+    // 遍历积分包产品
+    const creditPacks = provider.creditPackProducts as Record<string, any>;
+    if (creditPacks) {
+      for (const [packKey, pack] of Object.entries(creditPacks)) {
+        const pack_typed = pack as any;
+
+        // 积分包匹配
+        if (priceId && pack_typed.priceId === priceId) {
+          return {
+            priceId: pack_typed.priceId,
+            amount: pack_typed.amount,
+            currency: pack_typed.currency,
+            credits: pack_typed.credits,
+            priceName: `${packKey} Credit Pack`,
+            description: `${packKey} Credit Pack - One-time purchase`,
+            interval: 'onetime',
+          };
+        }
+
+        // 按plan和onetime匹配
+        if (!priceId && plan && billingType === 'onetime') {
+          if (packKey === plan) {
+            return {
+              priceId: pack_typed.priceId,
+              amount: pack_typed.amount,
+              currency: pack_typed.currency,
+              credits: pack_typed.credits,
+              priceName: `${packKey} Credit Pack`,
+              description: `${packKey} Credit Pack - One-time purchase`,
+              interval: 'onetime',
+            };
+          }
+        }
+
+        // 按plan匹配（billingType为空时也能找到first积分包）
+        if (!priceId && !billingType && plan && packKey === plan) {
+          return {
+            priceId: pack_typed.priceId,
+            amount: pack_typed.amount,
+            currency: pack_typed.currency,
+            credits: pack_typed.credits,
+            priceName: `${packKey} Credit Pack`,
+            description: `${packKey} Credit Pack - One-time purchase`,
+            interval: 'onetime',
+          };
+        }
+      }
+    }
+  }
+
+  return null;
 }

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

@@ -0,0 +1,49 @@
+import { getTranslations } from 'next-intl/server';
+import type { MoneyPriceData } from './money-price-types';
+
+interface BuildMoneyPriceDataOptions {
+  locale: string;
+  currency: string;
+  enabledBillingTypes?: string[];
+}
+
+interface BillingOption {
+  key: string;
+  name: string;
+  unit: string;
+  discountText: string;
+  subTitle?: string;
+}
+
+export async function buildMoneyPriceData({
+  locale,
+  currency,
+  enabledBillingTypes,
+}: BuildMoneyPriceDataOptions): Promise<MoneyPriceData> {
+  const t = await getTranslations({ locale, namespace: 'moneyPrice' });
+
+  const allOptions = t.raw('billingSwitch.options') as BillingOption[];
+  const options = enabledBillingTypes?.length
+    ? allOptions.filter((option) => enabledBillingTypes.includes(option.key))
+    : allOptions;
+
+  return {
+    title: t('title'),
+    subtitle: t('subtitle'),
+    billingSwitch: {
+      options,
+      defaultKey: t('billingSwitch.defaultKey'),
+    },
+    subscriptionPlans: t.raw('subscription.plans') as Array<any>,
+    creditsPlans: t.raw('credits.plans') as Array<any>,
+    buttonTexts: t.raw('buttonTexts') as {
+      getStarted: string;
+      getPro: string;
+      getUltra: string;
+      currentPlan: string;
+      upgrade: string;
+      buyCredits: string;
+    },
+    currency,
+  };
+}