From a014881c89daec46d862ce02bdd4c3d7df173e73 Mon Sep 17 00:00:00 2001
From: Travis Fischer <fisch0920@gmail.com>
Date: Fri, 20 Jun 2025 13:33:52 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[consumerId]/app-consumer-index.tsx       | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx b/apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx
index f5986066..0a93d800 100644
--- a/apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx
+++ b/apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx
@@ -1,12 +1,14 @@
 'use client'
 
 import { useSearchParams } from 'next/navigation'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { toast } from 'sonner'
 
 import { useAuthenticatedAgentic } from '@/components/agentic-provider'
 import { useConfettiFireworks } from '@/components/confetti'
 import { LoadingIndicator } from '@/components/loading-indicator'
+import { Button } from '@/components/ui/button'
+import { toastError } from '@/lib/notifications'
 import { useQuery } from '@/lib/query-client'
 
 export function AppConsumerIndex({ consumerId }: { consumerId: string }) {
@@ -60,8 +62,20 @@ export function AppConsumerIndex({ consumerId }: { consumerId: string }) {
     }
   }, [checkout, ctx, plan, consumer, fireConfetti])
 
+  const onManageSubscription = useCallback(async () => {
+    if (!ctx || !consumer) {
+      void toastError('Failed to create billing portal session')
+      return
+    }
+
+    const { url } = await ctx!.api.createConsumerBillingPortalSession({
+      consumerId: consumer.id
+    })
+    globalThis.open(url, '_blank')
+  }, [ctx, consumer])
+
   return (
-    <section>
+    <section className='flex flex-col gap-16'>
       {!ctx || isLoading ? (
         <LoadingIndicator />
       ) : isError ? (
@@ -77,9 +91,11 @@ export function AppConsumerIndex({ consumerId }: { consumerId: string }) {
             Subscription to {consumer.project.name}
           </h1>
 
-          <div className='mt-8'>
+          <div className=''>
             <pre className='max-w-lg'>{JSON.stringify(consumer, null, 2)}</pre>
           </div>
+
+          <Button onClick={onManageSubscription}>Manage Subscription</Button>
         </>
       )}
     </section>