diff --git a/frontend/src/components/AccountMenu.tsx b/frontend/src/components/AccountMenu.tsx index 1955746db..5f8271e2e 100644 --- a/frontend/src/components/AccountMenu.tsx +++ b/frontend/src/components/AccountMenu.tsx @@ -79,29 +79,20 @@ 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") ?? false; + const isTeamPlan = productName.toLowerCase().includes("team"); const showUpgrade = !isMax && !isTeamPlan; const showManage = (isPro || isMax || isStarter || isTeamPlan) && hasStripeAccount; - // Fetch team status only if user has team plan + // Fetch team status 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 0924cc5b3..9ff291df1 100644 --- a/frontend/src/components/BillingStatus.tsx +++ b/frontend/src/components/BillingStatus.tsx @@ -20,14 +20,13 @@ 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") ?? false; + const isTeamPlan = billingStatus?.product_name?.toLowerCase().includes("team"); - // Fetch team status only if user has team plan + // Fetch team status if user has team plan const { data: teamStatus } = useQuery({ queryKey: ["teamStatus"], queryFn: async () => { diff --git a/frontend/src/components/ModelSelector.tsx b/frontend/src/components/ModelSelector.tsx index c3a419f8c..cc86ac6a4 100644 --- a/frontend/src/components/ModelSelector.tsx +++ b/frontend/src/components/ModelSelector.tsx @@ -10,8 +10,6 @@ import { useLocalState } from "@/state/useLocalState"; import { useOpenSecret } from "@opensecret/react"; import { useEffect, useRef } from "react"; import { useNavigate } from "@tanstack/react-router"; -import { useQuery } from "@tanstack/react-query"; -import { getBillingService } from "@/billing/billingService"; import type { Model } from "openai/resources/models.js"; // Model configuration for display names, badges, and token limits @@ -91,26 +89,13 @@ export function ModelSelector({ messages?: ChatMessage[]; draftImages?: File[]; }) { - const { model, setModel, availableModels, setAvailableModels, setBillingStatus } = - useLocalState(); + const { model, setModel, availableModels, setAvailableModels, billingStatus } = useLocalState(); const os = useOpenSecret(); const navigate = useNavigate(); const isFetching = useRef(false); const hasFetched = useRef(false); const availableModelsRef = useRef(availableModels); - // Fetch billing status directly instead of relying on local state - const { data: billingStatus } = useQuery({ - queryKey: ["billingStatus"], - queryFn: async () => { - const billingService = getBillingService(); - const status = await billingService.getBillingStatus(); - setBillingStatus(status); - return status; - }, - enabled: !!os.auth.user - }); - // Check if chat contains any images or if there are draft images const chatHasImages = draftImages.length > 0 || diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index 5b58f9c2d..f902daebe 100644 --- a/frontend/src/routes/index.tsx +++ b/frontend/src/routes/index.tsx @@ -17,7 +17,6 @@ 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: { @@ -70,27 +69,14 @@ function Index() { const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [teamDialogOpen, setTeamDialogOpen] = useState(false); - // 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 + // Fetch team status for the dialog const { data: teamStatus } = useQuery({ queryKey: ["teamStatus"], queryFn: async () => { const billingService = getBillingService(); return await billingService.getTeamStatus(); }, - enabled: isTeamPlan && !!os.auth.user && !!billingStatus + enabled: !!os.auth.user }); // Auto-open team dialog if team_setup is true