1- ' use client'
1+ " use client"
22
3- import { useEffect , useState } from 'react'
4- import { Card , CardContent , CardHeader , CardTitle } from '@/components/ui/card'
5- import { Input } from '@/components/ui/input'
6- import { Button } from '@/components/ui/button'
7- import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from '@/components/ui/select'
8- import { updateUserName , updateOrganizationName , addOrganization , switchOrganization , getCurrentOrganization } from './actions'
9- import { useToast } from '@/hooks/use-toast'
10- import { Label } from '@/components/ui/label'
11- import { DialogTitle } from '@/components/ui/dialog'
12- import { Tabs , TabsContent , TabsList , TabsTrigger } from '@/components/ui/tabs'
13- import BillingComponent from './ee/billing'
3+ import { useEffect , useState } from "react"
4+ import { Card , CardContent , CardHeader , CardTitle } from "@/components/ui/card"
5+ import { Input } from "@/components/ui/input"
6+ import { Button } from "@/components/ui/button"
7+ import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from "@/components/ui/select"
8+ import { updateUserName , updateOrganizationName , addOrganization , switchOrganization , getCurrentOrganization } from "./actions"
9+ import { useToast } from "@/hooks/use-toast"
10+ import { Label } from "@/components/ui/label"
11+ import { DialogTitle } from "@/components/ui/dialog"
12+ import { Tabs , TabsContent , TabsList , TabsTrigger } from "@/components/ui/tabs"
13+ import BillingComponent from "./ee/billing"
14+ import { Billing } from "@prisma/client"
15+ import { getBillingAndCreateIfNotExists } from "./ee/actions"
1416
1517type Organization = {
1618 id : string
1719 name : string
1820}
1921
2022export default function SettingsPage ( ) {
21- const [ userName , setUserName ] = useState ( '' )
22- const [ organizationName , setOrganizationName ] = useState ( '' )
23- const [ newOrganizationName , setNewOrganizationName ] = useState ( '' )
23+ const [ userName , setUserName ] = useState ( "" )
24+ const [ organizationName , setOrganizationName ] = useState ( "" )
25+ const [ newOrganizationName , setNewOrganizationName ] = useState ( "" )
2426 const [ organizations , setOrganizations ] = useState < Organization [ ] > ( [ ] )
25- const [ currentOrganizationId , setCurrentOrganizationId ] = useState < string > ( '' )
27+ const [ currentOrganizationId , setCurrentOrganizationId ] = useState < string > ( "" )
2628 const { toast } = useToast ( )
29+ const [ billing , setBilling ] = useState < Billing | null > ( null )
2730
2831 useEffect ( ( ) => {
2932 const fetchData = async ( ) => {
3033 const data = await getCurrentOrganization ( )
31- setUserName ( data . user . name || '' )
34+ const billing = await getBillingAndCreateIfNotExists ( )
35+ setUserName ( data . user . name || "" )
3236 setOrganizationName ( data . currentOrganization . name )
3337 setOrganizations ( data . organizations )
3438 setCurrentOrganizationId ( data . currentOrganization . id )
39+ setBilling ( billing )
3540 }
3641 fetchData ( )
3742 } , [ ] )
@@ -58,7 +63,7 @@ export default function SettingsPage() {
5863 e . preventDefault ( )
5964 const newOrg = await addOrganization ( newOrganizationName )
6065 setOrganizations ( [ ...organizations , newOrg ] )
61- setNewOrganizationName ( '' )
66+ setNewOrganizationName ( "" )
6267 toast ( {
6368 title : "Success" ,
6469 description : "New organization added successfully" ,
@@ -78,8 +83,7 @@ export default function SettingsPage() {
7883 < Tabs defaultValue = "settings" className = "w-full" >
7984 < TabsList className = "w-full" >
8085 < TabsTrigger className = "w-full" value = "settings" > General Settings</ TabsTrigger >
81- { process . env . NEXT_PUBLIC_EE_ENABLED && process . env . NEXT_PUBLIC_EE_ENABLED === "true" &&
82- < TabsTrigger className = "w-full" value = "billing" > Billing</ TabsTrigger > }
86+ { billing && < TabsTrigger className = "w-full" value = "billing" > Billing</ TabsTrigger > }
8387 </ TabsList >
8488 < TabsContent value = "settings" >
8589 < div className = "space-y-5" >
@@ -88,7 +92,7 @@ export default function SettingsPage() {
8892 < CardTitle className = "text-lg font-semibold" > User Settings</ CardTitle >
8993 </ CardHeader >
9094 < CardContent >
91- < form onSubmit = { handleUpdateUserName } className = ' flex flex-col gap-2' >
95+ < form onSubmit = { handleUpdateUserName } className = " flex flex-col gap-2" >
9296 < Label > User Name</ Label >
9397 < div className = "flex gap-2" >
9498 < Input
@@ -106,7 +110,7 @@ export default function SettingsPage() {
106110 < CardHeader >
107111 < CardTitle className = "text-lg font-semibold" > Organization Settings</ CardTitle >
108112 </ CardHeader >
109- < CardContent className = ' flex flex-col gap-5' >
113+ < CardContent className = " flex flex-col gap-5" >
110114 < form onSubmit = { handleUpdateOrganizationName } className = "flex flex-col gap-2" >
111115 < Label > Organization Name</ Label >
112116 < div className = "flex gap-2" >
@@ -116,7 +120,7 @@ export default function SettingsPage() {
116120 onChange = { ( e ) => setOrganizationName ( e . target . value ) }
117121 placeholder = "Organization Name"
118122 />
119- < Button className = ' w-1/3' type = "submit" > Update Name</ Button >
123+ < Button className = " w-1/3" type = "submit" > Update Name</ Button >
120124 </ div >
121125 </ form >
122126 < form onSubmit = { handleAddOrganization } className = "flex flex-col gap-2" >
@@ -131,7 +135,7 @@ export default function SettingsPage() {
131135 < Button className = "w-1/3" type = "submit" disabled = { ! newOrganizationName } > Add Organization</ Button >
132136 </ div >
133137 </ form >
134- < div className = ' flex flex-col gap-2' >
138+ < div className = " flex flex-col gap-2" >
135139 < Label > Switch Organization</ Label >
136140 < Select onValueChange = { handleSwitchOrganization } value = { currentOrganizationId } >
137141 < SelectTrigger className = "w-full" >
@@ -150,9 +154,7 @@ export default function SettingsPage() {
150154 </ Card >
151155 </ div >
152156 </ TabsContent >
153- { process . env . NEXT_PUBLIC_EE_ENABLED && process . env . NEXT_PUBLIC_EE_ENABLED === "true" && < TabsContent value = "billing" >
154- < BillingComponent />
155- </ TabsContent > }
157+ { billing && < BillingComponent billingState = { billing } /> }
156158 </ Tabs >
157159 </ div >
158160 )
0 commit comments