feat: use on-demand billing portal fetch for all Billing Portal buttons

brandonkachen · brandonkachen · commit 5617bac0b0cb · 2026-02-04T20:38:29.000-08:00
diff --git a/common/src/types/subscription.ts b/common/src/types/subscription.ts
@@ -54,7 +54,7 @@ export interface ActiveSubscriptionResponse {
   subscription: SubscriptionInfo
   rateLimit: SubscriptionRateLimit
   limits: SubscriptionLimits
-  billingPortalUrl?: string
+
   /** Whether user prefers to fallback to a-la-carte credits when subscription limits are reached */
   fallbackToALaCarte: boolean
 }
diff --git a/web/src/app/api/orgs/[orgId]/billing/portal/route.ts b/web/src/app/api/orgs/[orgId]/billing/portal/route.ts
@@ -0,0 +1,93 @@
+import db from '@codebuff/internal/db'
+import * as schema from '@codebuff/internal/db/schema'
+import { env } from '@codebuff/internal/env'
+import { stripeServer } from '@codebuff/internal/util/stripe'
+import { eq, and } from 'drizzle-orm'
+import { NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+
+import type { NextRequest } from 'next/server'
+
+import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options'
+import { ORG_BILLING_ENABLED } from '@/lib/billing-config'
+import { logger } from '@/util/logger'
+
+interface RouteParams {
+  params: Promise<{
+    orgId: string
+  }>
+}
+
+export async function POST(req: NextRequest, { params }: RouteParams) {
+  if (!ORG_BILLING_ENABLED) {
+    return NextResponse.json(
+      { error: 'Organization billing is temporarily disabled' },
+      { status: 503 }
+    )
+  }
+
+  const session = await getServerSession(authOptions)
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { orgId } = await params
+
+  try {
+    // Check if user has access to this organization
+    const membership = await db
+      .select({
+        role: schema.orgMember.role,
+        organization: schema.org,
+      })
+      .from(schema.orgMember)
+      .innerJoin(schema.org, eq(schema.orgMember.org_id, schema.org.id))
+      .where(
+        and(
+          eq(schema.orgMember.org_id, orgId),
+          eq(schema.orgMember.user_id, session.user.id),
+        ),
+      )
+      .limit(1)
+
+    if (membership.length === 0) {
+      return NextResponse.json(
+        { error: 'Organization not found' },
+        { status: 404 },
+      )
+    }
+
+    const { role, organization } = membership[0]
+
+    // Check if user has permission to access billing
+    if (role !== 'owner' && role !== 'admin') {
+      return NextResponse.json(
+        { error: 'Insufficient permissions' },
+        { status: 403 },
+      )
+    }
+
+    if (!organization.stripe_customer_id) {
+      return NextResponse.json(
+        { error: 'No Stripe customer ID found for organization' },
+        { status: 400 },
+      )
+    }
+
+    const portalSession = await stripeServer.billingPortal.sessions.create({
+      customer: organization.stripe_customer_id,
+      return_url: `${env.NEXT_PUBLIC_CODEBUFF_APP_URL}/orgs/${organization.slug}/settings`,
+    })
+
+    return NextResponse.json({ url: portalSession.url })
+  } catch (error) {
+    logger.error(
+      { userId: session.user.id, orgId, error },
+      'Failed to create org billing portal session',
+    )
+    return NextResponse.json(
+      { error: 'Failed to create billing portal session' },
+      { status: 500 },
+    )
+  }
+}
diff --git a/web/src/app/api/orgs/[orgId]/billing/status/route.ts b/web/src/app/api/orgs/[orgId]/billing/status/route.ts
@@ -1,6 +1,5 @@
 import db from '@codebuff/internal/db'
 import * as schema from '@codebuff/internal/db/schema'
-import { env } from '@codebuff/internal/env'
 import { stripeServer } from '@codebuff/internal/util/stripe'
 import { eq, and, sql } from 'drizzle-orm'
 import { NextResponse } from 'next/server'
@@ -74,32 +73,21 @@ export async function GET(req: NextRequest, { params }: RouteParams) {
 
     // Get subscription details if it exists
     let subscriptionDetails = null
-    let billingPortalUrl = null
 
-    if (organization.stripe_customer_id) {
+    if (organization.stripe_customer_id && organization.stripe_subscription_id) {
       try {
-        // Create billing portal session
-        const portalSession = await stripeServer.billingPortal.sessions.create({
-          customer: organization.stripe_customer_id,
-          return_url: `${env.NEXT_PUBLIC_CODEBUFF_APP_URL}/orgs/${organization.slug}/settings`,
-        })
-        billingPortalUrl = portalSession.url
-
-        // Get subscription details if subscription exists
-        if (organization.stripe_subscription_id) {
-          const subscription = await stripeServer.subscriptions.retrieve(
-            organization.stripe_subscription_id,
-          )
-
-          subscriptionDetails = {
-            status: subscription.status,
-            current_period_start: subscription.current_period_start,
-            current_period_end: subscription.current_period_end,
-            cancel_at_period_end: subscription.cancel_at_period_end,
-          }
+        const subscription = await stripeServer.subscriptions.retrieve(
+          organization.stripe_subscription_id,
+        )
+
+        subscriptionDetails = {
+          status: subscription.status,
+          current_period_start: subscription.current_period_start,
+          current_period_end: subscription.current_period_end,
+          cancel_at_period_end: subscription.cancel_at_period_end,
         }
       } catch (error) {
-        logger.warn({ orgId, error }, 'Failed to get Stripe billing details')
+        logger.warn({ orgId, error }, 'Failed to get Stripe subscription details')
       }
     }
 
@@ -112,7 +100,6 @@ export async function GET(req: NextRequest, { params }: RouteParams) {
       totalMonthlyCost: seatCount * pricePerSeat,
       hasActiveSubscription: !!organization.stripe_subscription_id,
       subscriptionDetails,
-      billingPortalUrl,
       organization: {
         id: organization.id,
         name: organization.name,
diff --git a/web/src/app/profile/components/usage-section.tsx b/web/src/app/profile/components/usage-section.tsx
@@ -16,7 +16,7 @@ import { toast } from '@/components/ui/use-toast'
 
 const ManageCreditsCard = ({ isLoading = false }: { isLoading?: boolean }) => {
   const { data: session } = useSession()
-  const email = encodeURIComponent(session?.user?.email || '')
+  const email = session?.user?.email || ''
   const queryClient = useQueryClient()
   const [showConfetti, setShowConfetti] = useState(false)
   const [purchasedAmount, setPurchasedAmount] = useState(0)
@@ -84,7 +84,7 @@ const ManageCreditsCard = ({ isLoading = false }: { isLoading?: boolean }) => {
             isPurchasePending={buyCreditsMutation.isPending}
             showAutoTopup={true}
             isLoading={isLoading}
-            billingPortalUrl={`${env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL}?prefilled_email=${email}`}
+            email={email}
           />
         </div>
       </CardContent>
diff --git a/web/src/components/credits/CreditManagementSection.tsx b/web/src/components/credits/CreditManagementSection.tsx
@@ -1,8 +1,14 @@
+import { env } from '@codebuff/common/env'
+import { useMutation } from '@tanstack/react-query'
+import { ExternalLink, Loader2 } from 'lucide-react'
+
 import { CreditManagementSkeleton } from './CreditManagementSkeleton'
 import { CreditPurchaseSection } from './CreditPurchaseSection'
 
 import { AutoTopupSettings } from '@/components/auto-topup/AutoTopupSettings'
 import { OrgAutoTopupSettings } from '@/components/auto-topup/OrgAutoTopupSettings'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
 
 export interface CreditManagementSectionProps {
   onPurchase: (credits: number) => void
@@ -13,7 +19,7 @@ export interface CreditManagementSectionProps {
   organizationId?: string
   isOrganization?: boolean // Keep for backward compatibility
   isLoading?: boolean
-  billingPortalUrl?: string
+  email?: string
 }
 
 export { CreditManagementSkeleton }
@@ -27,11 +33,40 @@ export function CreditManagementSection({
   organizationId,
   isOrganization = false,
   isLoading = false,
-  billingPortalUrl,
+  email,
 }: CreditManagementSectionProps) {
   // Determine if we're in organization context
   const isOrgContext = context === 'organization' || isOrganization
 
+  const fallbackPortalUrl = email
+    ? `${env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL}?prefilled_email=${encodeURIComponent(email)}`
+    : env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL
+
+  const billingPortalMutation = useMutation({
+    mutationFn: async () => {
+      const res = await fetch('/api/user/billing-portal', {
+        method: 'POST',
+      })
+      if (!res.ok) {
+        const error = await res.json().catch(() => ({ error: 'Failed to open billing portal' }))
+        throw new Error(error.error || 'Failed to open billing portal')
+      }
+      const data = await res.json()
+      return data.url as string
+    },
+    onSuccess: (url) => {
+      window.open(url, '_blank', 'noopener,noreferrer')
+    },
+    onError: () => {
+      // Fall back to the prefilled email portal URL on error
+      window.open(fallbackPortalUrl, '_blank', 'noopener,noreferrer')
+      toast({
+        title: 'Note',
+        description: 'Opened billing portal - you may need to sign in.',
+      })
+    },
+  })
+
   if (isLoading) {
     return <CreditManagementSkeleton />
   }
@@ -41,15 +76,24 @@ export function CreditManagementSection({
       <div className="space-y-8">
         <div className="flex items-center justify-between">
           <h3 className="text-2xl font-bold">Buy Credits</h3>
-          {billingPortalUrl && (
-            <a
-              href={billingPortalUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm text-primary underline underline-offset-4 hover:text-primary/90"
+          {/* Only show billing portal button for user context - orgs have their own button */}
+          {!isOrgContext && (
+            <Button
+              variant="link"
+              size="sm"
+              onClick={() => billingPortalMutation.mutate()}
+              disabled={billingPortalMutation.isPending}
+              className="text-sm text-primary underline underline-offset-4 hover:text-primary/90 p-0 h-auto"
             >
-              Billing Portal →
-            </a>
+              {billingPortalMutation.isPending ? (
+                <>
+                  <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+                  Opening...
+                </>
+              ) : (
+                <>Billing Portal <ExternalLink className="ml-1 h-3 w-3" /></>
+              )}
+            </Button>
           )}
         </div>
         <CreditPurchaseSection
diff --git a/web/src/components/organization/billing-status.tsx b/web/src/components/organization/billing-status.tsx
@@ -1,20 +1,22 @@
 'use client'
 
 import { pluralize } from '@codebuff/common/util/string'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useMutation } from '@tanstack/react-query'
 import {
   CreditCard,
   Users,
   ExternalLink,
   AlertTriangle,
   CheckCircle,
+  Loader2,
 } from 'lucide-react'
 
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
+import { toast } from '@/components/ui/use-toast'
 import { useIsMobile } from '@/hooks/use-mobile'
 import { cn } from '@/lib/utils'
 
@@ -29,7 +31,6 @@ interface BillingStatus {
     current_period_end: number
     cancel_at_period_end: boolean
   }
-  billingPortalUrl?: string
   organization: {
     id: string
     name: string
@@ -58,6 +59,30 @@ export function BillingStatus({
 }: BillingStatusProps) {
   const isMobile = useIsMobile()
 
+  const billingPortalMutation = useMutation({
+    mutationFn: async () => {
+      const res = await fetch(`/api/orgs/${organizationId}/billing/portal`, {
+        method: 'POST',
+      })
+      if (!res.ok) {
+        const error = await res.json().catch(() => ({ error: 'Failed to open billing portal' }))
+        throw new Error(error.error || 'Failed to open billing portal')
+      }
+      const data = await res.json()
+      return data.url as string
+    },
+    onSuccess: (url) => {
+      window.open(url, '_blank', 'noopener,noreferrer')
+    },
+    onError: (err: Error) => {
+      toast({
+        title: 'Error',
+        description: err.message || 'Failed to open billing portal',
+        variant: 'destructive',
+      })
+    },
+  })
+
   const {
     data: billingStatus,
     isLoading,
@@ -233,23 +258,26 @@ export function BillingStatus({
           </div>
 
           {/* Billing Portal Link */}
-          {billingStatus.billingPortalUrl && (
+          {billingStatus.organization && (
             <div className="flex flex-col sm:flex-row gap-2">
               <Button
-                asChild
                 variant="outline"
                 size={isMobile ? 'sm' : 'default'}
                 className="w-full sm:w-auto"
+                onClick={() => billingPortalMutation.mutate()}
+                disabled={billingPortalMutation.isPending}
               >
-                <a
-                  href={billingStatus.billingPortalUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center justify-center"
-                >
-                  <ExternalLink className="mr-2 h-4 w-4" />
-                  Manage Billing
-                </a>
+                {billingPortalMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Opening...
+                  </>
+                ) : (
+                  <>
+                    <ExternalLink className="mr-2 h-4 w-4" />
+                    Manage Billing
+                  </>
+                )}
               </Button>
             </div>
           )}

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export interface ActiveSubscriptionResponse {`
`54`	`54`	`subscription: SubscriptionInfo`
`55`	`55`	`rateLimit: SubscriptionRateLimit`
`56`	`56`	`limits: SubscriptionLimits`
`57`		`- billingPortalUrl?: string`
	`57`	`+`
`58`	`58`	`/** Whether user prefers to fallback to a-la-carte credits when subscription limits are reached */`
`59`	`59`	`fallbackToALaCarte: boolean`
`60`	`60`	`}`