Feat/billing alert

libs/ui/app/billing-modal.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
+import { useTheme } from "next-themes"
+import { useAsync } from "react-use"
+
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+
+export default function BillingModal({ session }: { session: any }) {
+  const theme = useTheme()
+  const supabase = createClientComponentClient()
+  const { loading, value: profile } = useAsync(async () => {
+    const { data: profile } = await supabase
+      .from("profiles")
+      .select("*")
+      .eq("user_id", session?.user.id)
+      .single()
+
+    return profile
+  })
+
+  const pricingTableID =
+    theme.theme === "dark"
+      ? process.env.NEXT_PUBLIC_STRIPE_DARK_PRICING_TABLE_ID
+      : process.env.NEXT_PUBLIC_STRIPE_LIGHT_PRICING_TABLE_ID
+
+  return (
+    <AlertDialog open={!loading && !profile?.stripe_plan_id}>
+      <AlertDialogContent className="max-w-[700px]">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Your free trial has ended!</AlertDialogTitle>
+          <AlertDialogDescription>
+            Hey {profile?.first_name}, your free trial has ended and you need to
+            subscribe to one of our plans to get access to your agents.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="mt-4">
+          <stripe-pricing-table
+            pricing-table-id={pricingTableID}
+            publishable-key={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}
+          />
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

libs/ui/app/container.tsx

@@ -1,6 +1,7 @@
-import { Api } from "@/lib/api"
 import Sidebar from "@/components/sidebar"
 
+import BillingModal from "./billing-modal"
+
 interface RootLayoutProps {
   children: React.ReactNode
   session: any
@@ -9,6 +10,9 @@ interface RootLayoutProps {
 export default function RootLayout({ children, session }: RootLayoutProps) {
   return (
     <section className="flex h-screen">
+      {process.env.NEXT_PUBLIC_STRIPE_DARK_PRICING_TABLE_ID && (
+        <BillingModal session={session} />
+      )}
       <Sidebar />
       <div className="flex-1 overflow-auto">{children}</div>
     </section>

libs/ui/app/settings/billing/client-page.tsx

@@ -1,21 +1,5 @@
 "use client"
 
-import { Profile } from "@/types/profile"
-import { siteConfig } from "@/config/site"
-import { stripe } from "@/lib/stripe"
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-
-interface ApiKeysPageProps {
-  profile: any
-}
-
 declare global {
   namespace JSX {
     interface IntrinsicElements {
@@ -27,29 +11,7 @@ declare global {
   }
 }
 
-const BillingClientPage: React.FC<ApiKeysPageProps> = ({ profile }) => {
-  const onSubscribe = async (plan: string) => {
-    await stripe.subscriptions.create({
-      customer: profile?.stripe_customer_id,
-      items: [
-        {
-          price:
-            siteConfig.paymentPlans[
-              plan as keyof typeof siteConfig.paymentPlans
-            ],
-        },
-      ],
-      trial_period_days: 0,
-      payment_settings: {
-        save_default_payment_method: "off",
-      },
-    })
-    const { url } = await stripe.billingPortal.sessions.create({
-      customer: profile?.stripe_customer_id,
-    })
-    window.location.href = url
-  }
-
+const BillingClientPage = () => {
   return (
     <div className="flex flex-col space-y-8">
       <div className="flex flex-col space-y-2">

libs/ui/app/settings/billing/page.tsx

@@ -1,24 +1,7 @@
-import { cookies } from "next/headers"
-import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
-
 import BillingClientPage from "./client-page"
 
 export const dynamic = "force-dynamic"
 
 export default async function Billing() {
-  const supabase = createRouteHandlerClient({ cookies })
-  const {
-    data: { user },
-  } = await supabase.auth.getUser()
-  const { data: profile } = await supabase
-    .from("profiles")
-    .select("*")
-    .eq("user_id", user?.id)
-    .single()
-
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(profile.api_key)
-  }
-
-  return <BillingClientPage profile={profile} />
+  return <BillingClientPage />
 }