@windrun-huaiin/third-ui 27.0.0 → 28.0.0

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

@@ -2,6 +2,7 @@
 
 import { cn } from '@windrun-huaiin/lib/utils';
 import { GemIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
 import {
   AlertDialog,
   AlertDialogContent,
@@ -21,7 +22,9 @@ import {
   useState,
 } from 'react';
 import { MoneyPriceInteractive } from '../money-price/money-price-interactive';
-import type { MoneyPriceData } from '../money-price/money-price-types';
+import { getActiveProviderConfigUtil } from '../money-price/money-price-config-util';
+import type { MoneyPriceData, SubscriptionProductConfig } from '../money-price/money-price-types';
+import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles';
 import type { CreditPricingContext, PricingModalMode } from './types';
 
 interface CreditNavButtonProps {
@@ -172,6 +175,30 @@ export function CreditNavButton({
   );
 
   const isOnetimeModal = pricingModal.mode === 'onetime';
+  const modalInitialBillingType = useMemo(() => {
+    if (isOnetimeModal) {
+      return 'onetime';
+    }
+
+    const pricingContext = pricingModal.pricingContext;
+    const priceId = pricingContext?.initUserContext?.xSubscription?.priceId;
+    if (!pricingContext || !priceId) {
+      return undefined;
+    }
+
+    const providerConfig = getActiveProviderConfigUtil(pricingContext.moneyPriceConfig);
+    const products: Record<string, SubscriptionProductConfig> =
+      providerConfig.subscriptionProducts || providerConfig.products || {};
+    for (const product of Object.values(products)) {
+      for (const [billingType, plan] of Object.entries(product.plans)) {
+        if (plan.priceId === priceId) {
+          return billingType;
+        }
+      }
+    }
+
+    return undefined;
+  }, [isOnetimeModal, pricingModal.pricingContext]);
 
   return (
     <CreditNavPopoverContext.Provider value={contextValue}>
@@ -225,7 +252,13 @@ export function CreditNavButton({
             }))
           }
         >
-          <AlertDialogContent className="mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10">
+          <AlertDialogContent
+            className={cn(
+              'mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10',
+              themeMainBgColor,
+            )}
+            overlayClassName={dialogThemedOverlayClass}
+          >
             <AlertDialogHeader className="flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800">
               <AlertDialogTitle asChild>
                 <div className="flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white">
@@ -256,7 +289,7 @@ export function CreditNavButton({
                   checkoutApiEndpoint={pricingModal.pricingContext.checkoutApiEndpoint}
                   customerPortalApiEndpoint={pricingModal.pricingContext.customerPortalApiEndpoint}
                   enableSubscriptionUpgrade={pricingModal.pricingContext.enableSubscriptionUpgrade}
-                  initialBillingType={isOnetimeModal ? 'onetime' : undefined}
+                  initialBillingType={modalInitialBillingType}
                   disableAutoDetectBilling={isOnetimeModal}
                   initUserContext={pricingModal.pricingContext.initUserContext}
                 />

package/src/main/footer.tsx

@@ -3,9 +3,8 @@ import { MailIcon, ReceiptTextIcon, ShieldUserIcon } from '@windrun-huaiin/base-
 import Link from "next/link";
 import { FooterEmail } from './footer-email';
 import { safeT } from '../lib/t-intl';
-import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
+import { cn, getAsNeededLocalizedUrl } from '@windrun-huaiin/lib/utils';
 import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
-import { cn } from '@windrun-huaiin/lib';
 
 interface FooterData {
   terms: string;

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

@@ -18,19 +18,21 @@ export function MoneyPriceButton({
   isInitLoading = false,
   enableSubscriptionUpgrade = true
 }: MoneyPriceButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
 
   if (isInitLoading) {
     return (
       <div
-        className="w-full h-11 md:h-12 mt-4 md:mt-auto rounded-full bg-transparent"
+        className="relative w-full h-11 md:h-12 mt-4 md:mt-auto overflow-hidden rounded-full bg-gray-100/70 dark:bg-gray-800/40 animate-pulse transition-opacity duration-300 ease-out"
         aria-hidden="true"
         data-plan-button-placeholder={planKey}
-      />
+      >
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent dark:via-white/10" />
+      </div>
     );
   }
 
   const { isAuthenticated, subscriptionStatus } = userContext;
-  const [isLoading, setIsLoading] = useState(false);
   const subscriptionBilling = userContext.subscriptionType;
   const planTier = planKey;
   const planBilling = billingType;

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

@@ -47,6 +47,7 @@ export function MoneyPriceInteractive({
   initialBillingType,
   disableAutoDetectBilling = false,
   initUserContext,
+  isInitLoading = false,
 }: MoneyPriceInteractiveProps) {
   const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = useClerk();
   const router = useRouter();
@@ -148,23 +149,20 @@ export function MoneyPriceInteractive({
     priceIdsByCycle,
   ]);
 
-  const initialBillingCandidate = useMemo(() => {
-    if (initialBillingType) {
-      return resolvedInitialBilling;
-    }
-    if (detectedBillingType) {
-      return detectedBillingType;
+  const explicitInitialBilling = useMemo<BillingType | null>(() => {
+    if (
+      initialBillingType &&
+      billingOptions.some(option => option.key === initialBillingType)
+    ) {
+      return initialBillingType;
     }
-    return resolvedInitialBilling;
-  }, [initialBillingType, resolvedInitialBilling, detectedBillingType]);
+    return null;
+  }, [initialBillingType, billingOptions]);
 
-  const [billingType, setBillingType] = useState<BillingType>(initialBillingCandidate);
+  const [userSelectedBillingType, setUserSelectedBillingType] = useState<BillingType | null>(null);
+  const billingType = userSelectedBillingType ?? explicitInitialBilling ?? detectedBillingType ?? resolvedInitialBilling;
   const navigationLockRef = useRef(false);
 
-  useEffect(() => {
-    setBillingType(prev => (prev === initialBillingCandidate ? prev : initialBillingCandidate));
-  }, [initialBillingCandidate]);
-
   const [processingTarget, setProcessingTarget] = useState<ProcessingTarget>(null);
   const [isTouchDevice, setIsTouchDevice] = useState(false);
 
@@ -422,7 +420,7 @@ export function MoneyPriceInteractive({
                   )}
                   type="button"
                   data-billing-button={option.key}
-                  onClick={() => setBillingType(option.key as BillingType)}
+                  onClick={() => setUserSelectedBillingType(option.key)}
                 >
                   {option.name}
                 </button>
@@ -568,7 +566,7 @@ export function MoneyPriceInteractive({
                   processingTarget?.billing === billingType
                 }
                 isAnyProcessing={!!processingTarget}
-                isInitLoading={false}
+                isInitLoading={isInitLoading}
                 enableSubscriptionUpgrade={enableSubscriptionUpgrade}
               />
             </div>

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

@@ -119,6 +119,7 @@ export interface MoneyPriceInteractiveProps {
   initialBillingType?: string;
   disableAutoDetectBilling?: boolean;
   initUserContext?: InitUserContext;
+  isInitLoading?: boolean;
 }
 
 // 按钮组件属性