Manage state of price-lookup calls (#5915)

Now calls stripe-price-lookup once when prices are required rather then
bombarding on every rerender

frontend/src/desktop/components/quickAccessBar/QuickAccessBarFooterExtensions.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Box, Text, Stack } from '@mantine/core';
 import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
+import { BILLING_CONFIG } from '@app/config/billing';
 import { connectionModeService } from '@app/services/connectionModeService';
 import { authService } from '@app/services/authService';
 import { CREDIT_EVENTS } from '@app/constants/creditEvents';
@@ -49,7 +50,7 @@ export function QuickAccessBarFooterExtensions({ className }: QuickAccessBarFoot
   // - Still loading billing data
   // - User is a managed team member (unlimited credits)
   // - Credits >= 20 (only show when low)
-  if (!isSaasMode || !isAuthenticated || loading || isManagedTeamMember || creditBalance >= 20) {
+  if (!isSaasMode || !isAuthenticated || loading || isManagedTeamMember || creditBalance >= BILLING_CONFIG.PLAN_PRICING_PRELOAD_THRESHOLD) {
     return null;
   }
 

frontend/src/desktop/components/shared/config/configSections/SaasPlanSection.tsx

@@ -42,7 +42,7 @@ export function SaasPlanSection() {
   const { currentTeam, isTeamLeader, isPersonalTeam } = useSaaSTeam();
 
   // Plans data
-  const { plans, loading: plansLoading, error: plansError } = useSaaSPlans('usd');
+  const { plans, loading: plansLoading, error: plansError } = useSaaSPlans();
 
   // Check connection mode on mount
   useEffect(() => {

frontend/src/desktop/components/shared/modals/CreditModalBootstrap.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
+import { BILLING_CONFIG } from '@app/config/billing';
 import { CreditExhaustedModal } from '@app/components/shared/modals/CreditExhaustedModal';
 import { InsufficientCreditsModal } from '@app/components/shared/modals/InsufficientCreditsModal';
 import { useCreditEvents } from '@app/hooks/useCreditEvents';
@@ -18,7 +19,16 @@ export function CreditModalBootstrap() {
     requiredCredits?: number;
   }>({});
 
-  const { creditBalance, isManagedTeamMember } = useSaaSBilling();
+  const { creditBalance, isManagedTeamMember, lastFetchTime, plansLastFetchTime, refreshPlans } = useSaaSBilling();
+
+  // Preload plan pricing when billing confirms credits are low.
+  // Fires once: only when billing has loaded (lastFetchTime set) and plans haven't been
+  // fetched yet (plansLastFetchTime null). This way the modal shows real prices instantly.
+  useEffect(() => {
+    if (lastFetchTime !== null && plansLastFetchTime === null && creditBalance < BILLING_CONFIG.PLAN_PRICING_PRELOAD_THRESHOLD && !isManagedTeamMember) {
+      refreshPlans();
+    }
+  }, [lastFetchTime, plansLastFetchTime, creditBalance, isManagedTeamMember, refreshPlans]);
 
   // Monitor credit balance and dispatch events
   useCreditEvents();