diff --git a/apps/code/src/renderer/features/settings/components/sections/PlanUsageSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/PlanUsageSettings.tsx index ea5b9c7bd..7579a9517 100644 --- a/apps/code/src/renderer/features/settings/components/sections/PlanUsageSettings.tsx +++ b/apps/code/src/renderer/features/settings/components/sections/PlanUsageSettings.tsx @@ -1,4 +1,4 @@ -import { getAuthenticatedClient } from "@features/auth/hooks/authClient"; +import { useSwitchOrgMutation } from "@features/auth/hooks/authMutations"; import { useAuthStateValue } from "@features/auth/hooks/authQueries"; import { TokenSpendAnalysisBanner } from "@features/billing/components/TokenSpendAnalysisBanner"; import { useUsage } from "@features/billing/hooks/useUsage"; @@ -32,21 +32,6 @@ const log = logger.scope("plan-usage"); const SPEND_ANALYSIS_FLAG = "posthog-code-spend-analysis"; -async function openBillingPage(orgId: string | null): Promise { - if (orgId) { - try { - const client = await getAuthenticatedClient(); - if (client) { - await client.switchOrganization(orgId); - } - } catch (err) { - log.warn("Failed to switch org before opening billing", err); - } - } - const url = getBillingUrl(); - if (url) window.open(url, "_blank"); -} - function formatResetTime(seconds: number): string { if (seconds < 3600) return "less than 1 hour"; if (seconds < 86400) { @@ -74,7 +59,38 @@ export function PlanUsageSettings() { const { fetchSeat, upgradeToPro, cancelSeat, reactivateSeat, clearError } = useSeatStore(); const cloudRegion = useAuthStateValue((state) => state.cloudRegion); + const currentOrgId = useAuthStateValue((state) => state.currentOrgId); + const switchOrgMutation = useSwitchOrgMutation(); const billingUrl = getBillingUrl(cloudRegion); + + const [billingSwitch, setBillingSwitch] = useState<{ + pending: boolean; + error: boolean; + }>({ pending: false, error: false }); + + async function openBillingPage(orgId: string | null): Promise { + if (orgId && orgId !== currentOrgId) { + try { + await switchOrgMutation.mutateAsync(orgId); + } catch (err) { + log.warn("Failed to switch org before opening billing", err); + return; + } + } + if (billingUrl) window.open(billingUrl, "_blank"); + } + + async function switchToBillingOrg(orgId: string): Promise { + setBillingSwitch({ pending: true, error: false }); + try { + await switchOrgMutation.mutateAsync(orgId); + await fetchSeat({ autoProvision: true }); + setBillingSwitch({ pending: false, error: false }); + } catch (err) { + log.warn("Failed to switch to billing org", err); + setBillingSwitch({ pending: false, error: true }); + } + } const redirectFullUrl = redirectUrl ? (getPostHogUrl(redirectUrl, cloudRegion) ?? billingUrl) : null; @@ -178,10 +194,37 @@ export function PlanUsageSettings() { - - You have a Pro plan on{" "} - {seat.organization_name}. Usage on this - page reflects your current organization. + + + + You have a Pro plan on{" "} + {seat.organization_name}. Usage on + this page reflects your current organization. + + {billingOrgId && ( + + + {billingSwitch.error && ( + + Switching failed. Try again or switch from the sidebar. + + )} + + )} + )}