@windrun-huaiin/third-ui 26.0.0 → 28.0.0

package/src/fuma/server/page-generator.ts

@@ -0,0 +1,2 @@
+export { createFumaPage } from '../fuma-page-genarator';
+export type { FumaPageTocRenderMode } from '../fuma-page-genarator';

package/src/lib/seo-metadata.ts

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
-import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
+import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib/utils';
 
 export interface CreateLocalizedSiteMetadataOptions {
   locale: string;

package/src/lib/seo-util.ts

@@ -1,7 +1,7 @@
 import type { MetadataRoute } from 'next';
 import fs from 'fs';
 import path from 'path';
-import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
+import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib/utils';
 
 /**
  * Generate robots.txt content
@@ -139,4 +139,4 @@ export function createSitemapHandler(
   (sitemapHandler as any).dynamic = 'force-static';
 
   return sitemapHandler;
-}
+}

package/src/lib/server.ts

@@ -3,4 +3,4 @@
 export * from './clerk-intl';
 export * from './fuma-schema-check-util';
 export * from './seo-util';
-export * from './t-intl';
+export * from './t-intl';

package/src/{fuma/mdx → main/buttons}/gradient-button.tsx

@@ -23,12 +23,9 @@ export interface GradientButtonProps {
   disabled?: boolean;
   className?: string;
   iconClassName?: string;
-  // for Link
   href?: string;
   openInNewTab?: boolean;
   preserveReferrer?: boolean;
-  
-  // for click
   onClick?: () => void | Promise<void>;
   loadingText?: React.ReactNode;
   preventDoubleClick?: boolean;
@@ -52,7 +49,7 @@ export function GradientButton({
   variant = 'default',
 }: GradientButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
-  const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...'
+  const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...';
 
   const defaultIconClass = "h-4 w-4";
   const finalIconClass = cn(
@@ -60,14 +57,13 @@ export function GradientButton({
     iconClassName || defaultIconClass
   );
 
-  // set justify class according to alignment
   const getAlignmentClass = () => {
     switch (align) {
       case 'center':
         return 'justify-center';
       case 'right':
         return 'justify-end';
-      default: // 'left'
+      default:
         return 'justify-start';
     }
   };
@@ -80,11 +76,11 @@ export function GradientButton({
 
     if (onClick) {
       e.preventDefault();
-      
+
       if (preventDoubleClick) {
         setIsLoading(true);
       }
-      
+
       try {
         await onClick();
       } catch (error) {
@@ -98,10 +94,7 @@ export function GradientButton({
   };
 
   const isDisabled = disabled || isLoading;
-
   const displayTitle = isLoading ? actualLoadingText : title;
-
-  // icon
   const iconProvided = icon !== undefined;
 
   const iconNode = (() => {
@@ -147,8 +140,6 @@ export function GradientButton({
       ? 'justify-center'
       : 'justify-start';
 
-  // Base styles extracted from Button component + size="lg" (h-11 px-8)
-  // Removed [&_svg] constraints
   const baseButtonStyles = "inline-flex items-center gap-2 whitespace-nowrap h-11 px-8 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
   const variantClassName = variant === 'soft'
     ? cn(
@@ -163,11 +154,11 @@ export function GradientButton({
           themeIconColor,
           'border border-neutral-200 shadow-sm hover:shadow-md hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800'
         )
-    : cn(
-        themeButtonGradientClass,
-        themeButtonGradientHoverClass,
-        'text-white shadow-lg hover:shadow-xl'
-      );
+      : cn(
+          themeButtonGradientClass,
+          themeButtonGradientHoverClass,
+          'text-white shadow-lg hover:shadow-xl'
+        );
 
   const buttonClassName = cn(
     baseButtonStyles,
@@ -181,7 +172,6 @@ export function GradientButton({
   return (
     <div className={`flex flex-row gap-3 ${getAlignmentClass()}`}>
       {onClick ? (
-        // for click
         <button
           type="button"
           className={buttonClassName}
@@ -191,7 +181,6 @@ export function GradientButton({
           {buttonContent}
         </button>
       ) : (
-        // for Link
         <Link
           href={href || "#"}
           className={cn(buttonClassName, "no-underline hover:no-underline")}
@@ -204,4 +193,4 @@ export function GradientButton({
       )}
     </div>
   );
-} 
+}

package/src/main/buttons/index.ts

@@ -0,0 +1,5 @@
+'use client';
+
+export * from './gradient-button';
+export * from './x-button';
+export * from './x-toggle-button';

package/src/main/{x-button.tsx → buttons/x-button.tsx}

@@ -7,7 +7,6 @@ import { cn } from '@windrun-huaiin/lib/utils'
 
 type XButtonVariant = 'default' | 'soft' | 'subtle'
 
-// base button config
 interface BaseButtonConfig {
   icon: ReactNode
   text: string
@@ -15,7 +14,6 @@ interface BaseButtonConfig {
   disabled?: boolean
 }
 
-// menu item config
 interface MenuItemConfig extends BaseButtonConfig {
   tag?: {
     text: string
@@ -24,7 +22,6 @@ interface MenuItemConfig extends BaseButtonConfig {
   splitTopBorder?: boolean
 }
 
-// single button config
 interface SingleButtonProps {
   type: 'single'
   button: BaseButtonConfig
@@ -35,7 +32,6 @@ interface SingleButtonProps {
   variant?: XButtonVariant
 }
 
-// split button config
 interface SplitButtonProps {
   type: 'split'
   mainButton: BaseButtonConfig
@@ -77,7 +73,6 @@ export function XButton(props: xButtonProps) {
     return icon;
   };
 
-  // click outside to close menu
   useEffect(() => {
     if (props.type === 'split') {
       const handleClickOutside = (event: MouseEvent) => {
@@ -96,7 +91,6 @@ export function XButton(props: xButtonProps) {
     }
   }, [menuOpen, props.type])
 
-  // handle button click
   const handleButtonClick = async (onClick: () => void | Promise<void>) => {
     if (isLoading) return
 
@@ -110,7 +104,6 @@ export function XButton(props: xButtonProps) {
     }
   }
 
-  // base style class
   const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-colors"
   const singleButtonVariantClass = variant === 'soft'
     ? cn(
@@ -125,7 +118,7 @@ export function XButton(props: xButtonProps) {
           themeIconColor,
           "border border-neutral-200 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800"
         )
-    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
+      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
   const splitMainButtonVariantClass = variant === 'soft'
     ? cn(
         "bg-transparent hover:bg-black/5 dark:hover:bg-white/5",
@@ -136,7 +129,7 @@ export function XButton(props: xButtonProps) {
           "bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800",
           themeIconColor
         )
-    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
+      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
   const splitDropdownVariantClass = variant === 'soft'
     ? cn(
         "bg-transparent hover:bg-black/5 dark:hover:bg-white/5 sm:border-l",
@@ -149,13 +142,12 @@ export function XButton(props: xButtonProps) {
           themeIconColor,
           "border-neutral-200 dark:border-neutral-800"
         )
-    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
+      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
   const disabledClass = "opacity-60 cursor-not-allowed"
 
   if (props.type === 'single') {
     const { button, loadingText, minWidth = 'min-w-[110px]', className = '' } = props
     const isDisabled = button.disabled || isLoading
-    // loadingText: props.loadingText > button.text > 'Loading...'
     const actualLoadingText = loadingText || button.text?.trim() || 'Loading...'
 
     return (
@@ -188,36 +180,28 @@ export function XButton(props: xButtonProps) {
     )
   }
 
-  // Split button
   const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props
   const isMainDisabled = mainButton.disabled || isLoading
-  // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
   const actualLoadingText = loadingText || mainButton.text?.trim() || 'Loading...'
 
   return (
     <div className={cn(
       "relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0",
       menuOpen && "z-90",
-      variant === 'soft'
-        ? cn(themeBgColor, themeBorderColor, "border")
-        : variant === 'subtle'
-          ? cn(themeMainBgColor, "border border-neutral-200 dark:border-neutral-800")
-          : "bg-neutral-200 dark:bg-neutral-800",
       className
     )}>
-      {/* left main button */}
       <button
         onClick={() => handleButtonClick(mainButton.onClick)}
         disabled={isMainDisabled}
         className={cn(
-          "min-w-0 flex-1",
+          "flex-1 min-w-0 sm:min-w-[100px] sm:flex-initial rounded-l-full",
           baseButtonClass,
           splitMainButtonVariantClass,
-          "rounded-l-full rounded-r-none",
           isMainDisabled && disabledClass,
           mainButtonClassName
         )}
         onMouseDown={e => { if (e.button === 2) e.preventDefault() }}
+        title={mainButton.text}
       >
         {isLoading ? (
           <>
@@ -227,52 +211,54 @@ export function XButton(props: xButtonProps) {
         ) : (
           <>
             {renderIcon(mainButton.icon)}
-            <span className="min-w-0 truncate">{mainButton.text}</span>
+            <span>{mainButton.text}</span>
           </>
         )}
       </button>
 
-      {/* right dropdown button */}
       <button
         type="button"
+        onClick={() => setMenuOpen(!menuOpen)}
+        disabled={isLoading}
         className={cn(
-          "flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10",
+          "w-12 rounded-r-full",
+          baseButtonClass,
           splitDropdownVariantClass,
+          isLoading && disabledClass,
           dropdownButtonClassName
         )}
-        onClick={e => { e.stopPropagation(); setMenuOpen(v => !v) }}
-        aria-label="More actions"
-        aria-expanded={menuOpen}
+        aria-label="Open menu"
       >
-        <ChevronDownIcon className={chevronIconClass} />
+        <ChevronDownIcon className={cn(chevronIconClass, menuOpen && "rotate-180", "transition-transform")} />
       </button>
 
-      {/* dropdown menu */}
       {menuOpen && (
         <div
           ref={menuRef}
-          className={`absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-100 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`}
+          className={cn(
+            "absolute top-full right-0 mt-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg z-50 overflow-hidden",
+            menuWidth
+          )}
         >
           {menuItems.map((item, index) => (
             <button
               key={index}
+              type="button"
               onClick={() => {
-                handleButtonClick(item.onClick)
                 setMenuOpen(false)
+                handleButtonClick(item.onClick)
               }}
-              disabled={item.disabled}
-              className={`flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`}
-              style={item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined}
+              disabled={item.disabled || isLoading}
+              className={cn(
+                "w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors",
+                item.disabled && disabledClass,
+                item.splitTopBorder && "border-t border-neutral-200 dark:border-neutral-700"
+              )}
             >
-              <span className="flex items-center">
-                {item.icon}
-                <span>{item.text}</span>
-              </span>
+              {renderIcon(item.icon)}
+              <span className="flex-1">{item.text}</span>
               {item.tag && (
-                <span
-                  className="absolute right-3 top-1 text-[10px] font-semibold"
-                  style={{ color: item.tag.color || '#A855F7', pointerEvents: 'none' }}
-                >
+                <span className={cn("px-1.5 py-0.5 text-xs rounded", item.tag.color || "bg-blue-100 text-blue-800")}>
                   {item.tag.text}
                 </span>
               )}

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/credit/credit-overview-client.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useClerk } from '@clerk/nextjs';
-import { GradientButton } from '@third-ui/fuma/mdx/gradient-button';
+import { GradientButton } from '../buttons';
 import {
   BellIcon,
   ChevronDownIcon,

package/src/main/credit/index.ts

@@ -0,0 +1,11 @@
+'use client';
+
+export { CreditOverviewClient } from './credit-overview-client';
+export { CreditNavButton } from './credit-nav-button';
+export type { CreditOverviewTranslations } from './credit-overview-client';
+export type {
+  CreditOverviewData,
+  CreditBucket,
+  CreditBucketStatus,
+  SubscriptionInfo,
+} from './types';

package/src/main/credit/server.ts

@@ -0,0 +1,7 @@
+export { CreditOverview } from './credit-overview';
+export type {
+  CreditOverviewData,
+  CreditBucket,
+  CreditBucketStatus,
+  SubscriptionInfo,
+} from './types';

package/src/main/cta.tsx

@@ -1,5 +1,5 @@
 import { getTranslations } from 'next-intl/server';
-import { GradientButton } from "@third-ui/fuma/mdx/gradient-button";
+import { GradientButton } from "./buttons";
 import { cn } from '@windrun-huaiin/lib/utils';
 import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { richText } from './rich-text-expert';

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/hero/index.ts

@@ -0,0 +1,4 @@
+'use client';
+
+export { HeroMedia } from '../hero-media';
+export { HeroSection } from '../hero-section';

package/src/main/home/server.ts

@@ -0,0 +1,7 @@
+export * from '../gallery/gallery-server';
+export * from '../usage';
+export * from '../features';
+export * from '../tips';
+export * from '../faq';
+export * from '../seo-content';
+export * from '../cta';

package/src/main/index.ts

@@ -1,28 +1,9 @@
 'use client';
 
-// Main application Client components
+// Lightweight common client components.
 export * from './go-to-top';
 export * from './loading';
 export * from './nprogress-bar';
-export * from './alert-dialog';
-export * from './x-button'
-export * from './x-toggle-button'
-export * from './ai-prompt-textarea'
 export * from './rich-text-expert'
 export * from './faq-interactive'
-export * from './price-plan-interactive'
-export * from './gallery/gallery-interactive'
-export * from './delayed-img'
-export * from './snake-loading-frame'
-export * from './pill-select'
-// Money Price Client Components
-export { MoneyPriceInteractive } from './money-price/money-price-interactive';
-export { MoneyPriceButton } from './money-price/money-price-button';
-
-export { CreditOverviewClient } from './credit/credit-overview-client';
-export { CreditNavButton } from './credit/credit-nav-button';
-
-export { HeroMedia } from './hero-media';
-export { HeroSection } from './hero-section';
-
 export { InfoTooltip } from './info-tooltip';

package/src/main/language-detector.tsx

@@ -76,7 +76,6 @@ export function LanguageDetector({ i18nConfig }: LanguageDetectorProps) {
 
       // Use the automatic closing time from the configuration
       const timer = setTimeout(() => {
-        console.log('[LanguageDetector] Auto closing after timeout')
         setShow(false)
         // Save the rejected state when the automatic closing occurs
         savePreference(browserLang, 'rejected')

package/src/main/loading/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export { Loading, getLoadingCycleDurationMs } from '../loading';

package/src/main/loading-frame/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export { SnakeLoadingFrame, SnakeLoadingPreview } from '../snake-loading-frame';

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

@@ -0,0 +1,18 @@
+'use client';
+
+export { MoneyPriceInteractive } from './money-price-interactive';
+export { MoneyPriceButton } from './money-price-button';
+export type {
+  MoneyPriceConfig,
+  MoneyPriceData,
+  InitUserContext,
+  MoneyPriceInteractiveProps,
+  MoneyPriceButtonProps,
+  PaymentProvider,
+  PaymentProviderConfig,
+  EnhancePricePlan,
+  SubscriptionProductConfig,
+  CreditPackProductConfig,
+  UserContext,
+} from './money-price-types';
+export { UserState } from './money-price-types';

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

@@ -14,22 +14,25 @@ export function MoneyPriceButton({
   onAction,
   texts,
   isProcessing = false,
+  isAnyProcessing = false,
   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;
@@ -224,19 +227,24 @@ export function MoneyPriceButton({
   
   if (config.hidden) return null;
 
+  const hasActiveSubscription =
+    subscriptionStatus === UserState.ProUser ||
+    subscriptionStatus === UserState.UltraUser;
+
   if (
     !enableSubscriptionUpgrade &&
     billingType !== 'onetime' &&
+    hasActiveSubscription &&
     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 isCurrentButtonBusy = isLoading || isProcessing;
+  const isDisabled = config.disabled || isCurrentButtonBusy || isAnyProcessing;
+  const displayText = isCurrentButtonBusy ? 'Processing...' : config.text;
+  const isDisabledByConfigOnly = config.disabled && !isCurrentButtonBusy && !isAnyProcessing;
 
   const handleClick = async (e: React.MouseEvent) => {
     if (isDisabled) {
@@ -265,9 +273,9 @@ export function MoneyPriceButton({
     isDisabledByConfigOnly
       ? 'bg-gray-400 cursor-not-allowed'
       : themeButtonGradientClass,
-    !isDisabledByConfigOnly && !isBusy &&
+    !isDisabledByConfigOnly && !isCurrentButtonBusy && !isAnyProcessing &&
       themeButtonGradientHoverClass,
-    isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed'
+    (isCurrentButtonBusy || isAnyProcessing) && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed'
   );
 
   return (