make build work for preview url

e2b-dev · Jul 15, 2024 · 4ec6edd · 4ec6edd
1 parent c6e3dd4
commit 4ec6edd
Show file tree

Hide file tree

Showing 18 changed files with 242 additions and 1,108 deletions.
diff --git a/apps/docs/src/app/api/cli/page.tsx → apps/docs/src/app/(main)/api/cli/page.tsx b/apps/docs/src/app/api/cli/page.tsx → apps/docs/src/app/(main)/api/cli/page.tsx
diff --git a/apps/docs/src/app/(main)/api/layout.tsx b/apps/docs/src/app/(main)/api/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/apps/docs/src/app/api/status/pro/route.ts → ...cs/src/app/(main)/api/status/pro/route.ts b/apps/docs/src/app/api/status/pro/route.ts → ...cs/src/app/(main)/api/status/pro/route.ts
diff --git a/apps/docs/src/app/api/status/route.ts → apps/docs/src/app/(main)/api/status/route.ts b/apps/docs/src/app/api/status/route.ts → apps/docs/src/app/(main)/api/status/route.ts
diff --git a/apps/docs/src/app/(main)/dashboard/page.tsx b/apps/docs/src/app/(main)/dashboard/page.tsx
@@ -15,30 +15,41 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useUser } from '@/utils/useUser'
+import { User } from '@supabase/supabase-js'
 
 
 const menuLabels = ['General', 'Billing', 'Sandboxes', 'Team', 'Templates'] as const
 type MenuLabel  = typeof menuLabels[number]
 
 export default function Dashboard() {
-  const [selectedItem, setSelectedItem] = useState<MenuLabel>('General')
-
-  return (
-    <div className="flex min-h-screen flex-row pt-32 px-32">
-      <Sidebar selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
-      <div className="flex-1 pl-10">
-        <h2 className='text-2xl mb-2 font-bold'>{selectedItem}</h2>
-        <div className='border border-white/5 w-full h-[1px] mb-10'/>
-        <MainContent selectedItem={selectedItem} />
+  const { user, isLoading, error } = useUser()
+  const [selectedItem, setSelectedItem] = useState<MenuLabel>('Billing')
+
+  if (error)  {
+    return <div>Error: {error.message}</div>
+  }
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+  if (user) {
+    return (
+      <div className="flex min-h-screen flex-row pt-32 px-32">
+        <Sidebar selectedItem={selectedItem} setSelectedItem={setSelectedItem} user={user} />
+        <div className="flex-1 pl-10">
+          <h2 className='text-2xl mb-2 font-bold'>{selectedItem}</h2>
+          <div className='border border-white/5 w-full h-[1px] mb-10'/>
+          <MainContent selectedItem={selectedItem} user={user} />
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
 
-const Sidebar = ({ selectedItem, setSelectedItem }) => (
+const Sidebar = ({ selectedItem, setSelectedItem, user }) => (
   <div className="h-full w-48 space-y-2">
 
-    <AccountSelectItem />
+    <AccountSelectItem user={user} />
 
     <MenuItem 
       icon={Settings} 
@@ -83,25 +94,33 @@ const MenuItem = ({ icon: Icon, label , selected, onClick }: { icon: LucideIcon;
   </div>
 )
 
-const AccountSelectItem = () => {
+const AccountSelectItem = ({ user }) => { 
+
+  const teams = user?.teams.map((team: any) => ({
+    id: team.id,
+    name: team.name,
+    default: team.is_default,
+  }))
+
+  const defaultTeam = teams?.find((teams: any) => teams.default)
+
   return(
     <DropdownMenu>
     <DropdownMenuTrigger
       className='dropdown-trigger group outline-none flex w-full items-center justify-between rounded-lg p-2 mb-6 hover:bg-zinc-800 hover:cursor-pointer'
     >
       <div className='flex items-start flex-col'>
-        <h3 className='font-bold'>Default Team</h3>
-        <p className='text-sm'>Team account</p>
+        <h3 className='font-bold'>{defaultTeam.name}</h3>
+        {/* <p className='text-sm'>Team account</p> */}
       </div> 
       <ChevronRight className='transform transition-transform duration-300 group-hover:rotate-90' />
-
-
     </DropdownMenuTrigger>
     <DropdownMenuContent className='flex flex-col w-48 bg-zinc-900 border border-white/30'>
-      <DropdownMenuItem>Personal Account</DropdownMenuItem>
-      <DropdownMenuSeparator/>
-      <DropdownMenuItem>Default Team</DropdownMenuItem>
-      <DropdownMenuItem>Other Team</DropdownMenuItem>
+      {teams?.map((team: any) => (
+        <DropdownMenuItem key={team.id}>
+          {team.name}
+        </DropdownMenuItem>
+      ))}
       <DropdownMenuSeparator />
       <DropdownMenuItem className='flex items-center space-x-1'>
         <PlusCircle width={15} height={15} />
@@ -112,14 +131,14 @@ const AccountSelectItem = () => {
   )
 }
 
-const MainContent = ({ selectedItem }: { selectedItem: MenuLabel }) => {
+const MainContent = ({ selectedItem, user }: { selectedItem: MenuLabel, user: User }) => {
   switch (selectedItem) {
     case 'General':
-      return <GeneralContent />
+      return <GeneralContent user={user} />
     case 'Billing':
       return <BillingContent />
     case 'Sandboxes':
-      return <SandboxesContent />
+      return <SandboxesContent user={user} />
     case 'Team':
       return <TeamContent />
     case 'Templates':

diff --git a/apps/docs/src/components/Dashboard/Billing.tsx b/apps/docs/src/components/Dashboard/Billing.tsx
@@ -1,12 +1,36 @@
 import { ResponsiveBar } from '@nivo/bar'
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useUser } from '@/utils/useUser'
+import { Button } from '../Button'
+import { useUsage } from '@/utils/useUsage'
+
+function formatCurrency(value: number) {
+  return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
 
 export const BillingContent = () => {
+  const { credits } = useUsage()
+
   return (
     <div className="flex flex-col w-full h-full">
+      {credits && (
+      <div className='flex flex-col space-y-2 pb-10'>
+        <h2 className='font-bold text-xl'>Credits left</h2>
+        <span className="text-sm">Credits automatically are used to bill your team</span>
+        <span className="text-sm font-mono text-green-300/80">${formatCurrency(credits)}</span>
+      </div>
+      )}
+
       <div>
         <h2 className='font-bold pb-10 text-xl'>Billing history</h2>
       </div>
-      <BarChart className="aspect-[6/3] w-2/3"/>
+      <BarChart className="aspect-[6/3] w-2/3 pb-10"/>
+
+      <div className='flex items-center space-x-4'>
+        <h2 className='font-bold text-xl'>Make changes to your billing</h2>
+        <ManageBilling />
+      </div>
     </div>
   )
 }
@@ -66,3 +90,27 @@ function BarChart(props: any) {
 }
 
 
+const ManageBilling = () => {
+  const { user } = useUser()
+  const [url, setURL] = useState('')
+
+  useEffect(function getBillingURL() {
+    if (!user) return
+    const u = `${process.env.NEXT_PUBLIC_STRIPE_BILLING_URL}?prefilled_email=${user.teams[0].email}`
+    setURL(u)
+  }, [user])
+
+  if (!user || !url) {
+    return null
+  }
+
+  return (
+    <Button variant='secondary' className='w-fit'>
+      <Link href={url} target="_blank" rel="noreferrer">
+        To billing portal
+      </Link>
+    </Button>
+  )
+}
+
+
diff --git a/apps/docs/src/components/Dashboard/General.tsx b/apps/docs/src/components/Dashboard/General.tsx
@@ -17,29 +17,23 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog'
+import { User } from '@supabase/supabase-js'
+import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
 
-const fakeApiKeys = [
-  {
-    id: '1',
-    key: '3728621b-10ca-4153-99f5-e8b7080117f7',
-    createdAt: '2022-10-04T04:45:00.000Z',
-    updatedAt: '2022-10-04T04:45:00.000Z',
-  },
-  {
-    id: '2',
-    key: '16eea788-3927-4501-b5c5-b3eeb170bc38',
-    createdAt: '2022-10-04T04:45:00.000Z',
-    updatedAt: '2022-10-04T04:45:00.000Z',
-  },
-]
-
-export const GeneralContent = () => {
+
+export const GeneralContent = ({user}: {user: User}) => {
   const { toast } = useToast()
   const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const [apiKeys, setApiKeys] = useState(fakeApiKeys)
   const [currentKeyId, setCurrentKeyId] = useState<string | null>(null)
   const [hoveredKeyId, setHoveredKeyId] = useState<string | null>(null)
 
+  //@ts-ignore
+  const [apiKeys, setApiKeys] = useState<{ id: string, key: string, createdAt: string }[]>(user?.apiKeys.map((apiKey: any, index: any) => ({
+    id: String(index + 1),
+    key: apiKey.api_key,
+    createdAt: apiKey.created_at,
+  })) || [])
+
   const closeDialog = () => setIsDialogOpen(false)
   const openDialog = (id: string) => {
     setCurrentKeyId(id)
@@ -51,8 +45,18 @@ export const GeneralContent = () => {
     closeDialog()
   }
 
-  const addApiKey = () => {
-
+  const addApiKey = async() => {
+    const supabase = createPagesBrowserClient()
+    const res = await supabase
+      .from('team_api_keys')
+      .insert({
+        team_id: user.id,
+        api_key: uuidv4(),
+        created_at: new Date().toISOString(),
+      })
+
+    console.log(res)
+
     toast({
       title: 'API key created',
     })
@@ -76,7 +80,7 @@ export const GeneralContent = () => {
   const maskApiKey = (key: string) => {
     const firstFour = key.slice(0, 4)
     const lastTwo = key.slice(-2)
-    const stars = '*'.repeat(key.length - 6) // Use '#' or another fixed-width character
+    const stars = '*'.repeat(key.length - 6) // use fixed-width character
     return `${firstFour}${stars}${lastTwo}`
   }
 

diff --git a/apps/docs/src/components/Dashboard/Team.tsx b/apps/docs/src/components/Dashboard/Team.tsx
@@ -36,6 +36,9 @@ export const TeamContent = () => {
   const [currentKeyId, setCurrentUserId] = useState<string | null>(null)
   const [team, setTeam] = useState(fakeTeam)
 
+  // TODO: this logs just to make build work, remove it later
+  console.log(currentKeyId)
+
   const closeDialog = () => setIsDialogOpen(false) 
   const openDialog = (id: string) => {
     setCurrentUserId(id)

diff --git a/apps/docs/src/components/ui/alert-dialog.tsx b/apps/docs/src/components/ui/alert-dialog.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}
@@ -51,35 +51,35 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      'flex flex-col space-y-2 text-center sm:text-left',
       className
     )}
     {...props}
   />
 )
-AlertDialogHeader.displayName = "AlertDialogHeader"
+AlertDialogHeader.displayName = 'AlertDialogHeader'
 
 const AlertDialogFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
       className
     )}
     {...props}
   />
 )
-AlertDialogFooter.displayName = "AlertDialogFooter"
+AlertDialogFooter.displayName = 'AlertDialogFooter'
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn('text-lg font-semibold', className)}
     {...props}
   />
 ))
@@ -91,7 +91,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
@@ -117,8 +117,8 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
       className
     )}
     {...props}