diff --git a/frontend/src/components/AccountMenu.tsx b/frontend/src/components/AccountMenu.tsx index 5f8271e2e..1955746db 100644 --- a/frontend/src/components/AccountMenu.tsx +++ b/frontend/src/components/AccountMenu.tsx @@ -79,20 +79,29 @@ function ConfirmDeleteDialog() { export function AccountMenu() { const os = useOpenSecret(); const router = useRouter(); - const { billingStatus } = useLocalState(); const [isPortalLoading, setIsPortalLoading] = useState(false); const [isTeamDialogOpen, setIsTeamDialogOpen] = useState(false); + // Fetch billing status directly instead of relying on local state + const { data: billingStatus } = useQuery({ + queryKey: ["billingStatus"], + queryFn: async () => { + const billingService = getBillingService(); + return await billingService.getBillingStatus(); + }, + enabled: !!os.auth.user + }); + const hasStripeAccount = billingStatus?.stripe_customer_id !== null; const productName = billingStatus?.product_name || ""; const isPro = productName.toLowerCase().includes("pro"); const isMax = productName.toLowerCase().includes("max"); const isStarter = productName.toLowerCase().includes("starter"); - const isTeamPlan = productName.toLowerCase().includes("team"); + const isTeamPlan = productName.toLowerCase().includes("team") ?? false; const showUpgrade = !isMax && !isTeamPlan; const showManage = (isPro || isMax || isStarter || isTeamPlan) && hasStripeAccount; - // Fetch team status if user has team plan + // Fetch team status only if user has team plan const { data: teamStatus } = useQuery({ queryKey: ["teamStatus"], queryFn: async () => { diff --git a/frontend/src/components/BillingStatus.tsx b/frontend/src/components/BillingStatus.tsx index 9ff291df1..0924cc5b3 100644 --- a/frontend/src/components/BillingStatus.tsx +++ b/frontend/src/components/BillingStatus.tsx @@ -20,13 +20,14 @@ export function BillingStatus() { const status = await billingService.getBillingStatus(); setBillingStatus(status); return status; - } + }, + enabled: !!os.auth.user }); // Check if user has team plan - const isTeamPlan = billingStatus?.product_name?.toLowerCase().includes("team"); + const isTeamPlan = billingStatus?.product_name?.toLowerCase().includes("team") ?? false; - // Fetch team status if user has team plan + // Fetch team status only if user has team plan const { data: teamStatus } = useQuery({ queryKey: ["teamStatus"], queryFn: async () => { diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx index 7edd3a4da..3ca03827e 100644 --- a/frontend/src/routes/_auth.chat.$chatId.tsx +++ b/frontend/src/routes/_auth.chat.$chatId.tsx @@ -233,16 +233,18 @@ function ChatComponent() { setUserImages([]); // Send message with system prompt as separate parameter - appendUserMessage(prompt, images, undefined, undefined, sysPrompt || undefined).catch((error) => { - // Only reset if it wasn't an abort - if (!(error instanceof Error) || error.message !== "Stream aborted") { - console.error("[ChatComponent] Failed to append message:", error); - setUserPrompt(prompt); - setSystemPrompt(sysPrompt); - setUserImages(images); - initialPromptProcessedRef.current = false; + appendUserMessage(prompt, images, undefined, undefined, sysPrompt || undefined).catch( + (error) => { + // Only reset if it wasn't an abort + if (!(error instanceof Error) || error.message !== "Stream aborted") { + console.error("[ChatComponent] Failed to append message:", error); + setUserPrompt(prompt); + setSystemPrompt(sysPrompt); + setUserImages(images); + initialPromptProcessedRef.current = false; + } } - }); + ); } }, [ userPrompt, diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index f902daebe..5b58f9c2d 100644 --- a/frontend/src/routes/index.tsx +++ b/frontend/src/routes/index.tsx @@ -17,6 +17,7 @@ import { TeamManagementDialog } from "@/components/team/TeamManagementDialog"; import { useQuery } from "@tanstack/react-query"; import { getBillingService } from "@/billing/billingService"; import type { TeamStatus } from "@/types/team"; +import type { BillingStatus as BillingStatusType } from "@/billing/billingApi"; const homeVariants = cva("grid h-full w-full overflow-hidden", { variants: { @@ -69,14 +70,27 @@ function Index() { const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [teamDialogOpen, setTeamDialogOpen] = useState(false); - // Fetch team status for the dialog + // Fetch billing status first to check if user has team plan + const { data: billingStatus } = useQuery({ + queryKey: ["billingStatus"], + queryFn: async () => { + const billingService = getBillingService(); + return await billingService.getBillingStatus(); + }, + enabled: !!os.auth.user + }); + + // Check if user has team plan + const isTeamPlan = billingStatus?.product_name?.toLowerCase().includes("team") ?? false; + + // Fetch team status only if user has team plan const { data: teamStatus } = useQuery({ queryKey: ["teamStatus"], queryFn: async () => { const billingService = getBillingService(); return await billingService.getTeamStatus(); }, - enabled: !!os.auth.user + enabled: isTeamPlan && !!os.auth.user && !!billingStatus }); // Auto-open team dialog if team_setup is true