1
+ import PageLoading from '@/components/page-loading'
1
2
import {
2
3
Avatar ,
3
4
AvatarFallback ,
@@ -9,6 +10,7 @@ import {
9
10
} from '@/components/ui'
10
11
import { ROUTES } from '@/constants'
11
12
import { useLogout } from '@/hooks/auth'
13
+ import { useCreateBillingPortalSession } from '@/hooks/subscription'
12
14
import { useUserStore } from '@/store/use-user'
13
15
import {
14
16
Bot ,
@@ -17,6 +19,7 @@ import {
17
19
LogOut ,
18
20
MessageCircle ,
19
21
MessageSquareCode ,
22
+ Rss ,
20
23
} from 'lucide-react'
21
24
import { useTranslation } from 'react-i18next'
22
25
import { Link } from 'react-router-dom'
@@ -62,68 +65,90 @@ const Sidebar = () => {
62
65
63
66
const logoutMutation = useLogout ( )
64
67
68
+ const createBillingPortalSessionMutation = useCreateBillingPortalSession ( )
69
+
65
70
return (
66
- < aside className = 'w-sidebar bg-stone-800 min-h-svh flex flex-col fixed left-0 top-0 bottom-0 z-50' >
67
- < Link
68
- className = 'bg-primary w-sidebar h-sidebar flex items-center justify-center'
69
- to = { ROUTES . PRIVATE . DASHBOARD }
70
- >
71
- < Bot size = { 32 } className = 'text-white' />
72
- </ Link >
73
- < nav className = 'flex flex-col flex-1' >
74
- < ul className = 'flex flex-col' >
75
- { SIDEBAR_ITEMS . map ( ( item , index ) => (
76
- < TooltipProvider key = { item . i18n + index } >
71
+ < >
72
+ { createBillingPortalSessionMutation . isPending && (
73
+ < PageLoading className = 'fixed inset-0 z-[1000] backdrop-blur-sm bg-transparent' />
74
+ ) }
75
+ < aside className = 'w-sidebar bg-stone-800 min-h-svh flex flex-col fixed left-0 top-0 bottom-0 z-50' >
76
+ < Link
77
+ className = 'bg-primary w-sidebar h-sidebar flex items-center justify-center'
78
+ to = { ROUTES . PRIVATE . DASHBOARD }
79
+ >
80
+ < Bot size = { 32 } className = 'text-white' />
81
+ </ Link >
82
+ < nav className = 'flex flex-col flex-1' >
83
+ < ul className = 'flex flex-col' >
84
+ { SIDEBAR_ITEMS . map ( ( item , index ) => (
85
+ < TooltipProvider key = { item . i18n + index } >
86
+ < Tooltip >
87
+ < TooltipTrigger >
88
+ < li className = 'h-12 w-full flex items-center justify-center group' >
89
+ < Link
90
+ to = { item . to }
91
+ className = 'w-full h-full flex items-center justify-center'
92
+ >
93
+ { item . Icon }
94
+ </ Link >
95
+ </ li >
96
+ </ TooltipTrigger >
97
+ < TooltipContent side = 'right' >
98
+ < p > { t ( item . i18n as any ) } </ p >
99
+ </ TooltipContent >
100
+ </ Tooltip >
101
+ </ TooltipProvider >
102
+ ) ) }
103
+ </ ul >
104
+ < div className = 'mt-auto' >
105
+ < TooltipProvider >
106
+ < Tooltip >
107
+ < TooltipTrigger className = 'h-12 w-full flex items-center justify-center group' >
108
+ < Link
109
+ className = 'w-full h-full flex items-center justify-center'
110
+ to = { ROUTES . PRIVATE . USER_SUBSCRIPTION . INDEX }
111
+ >
112
+ < Rss className = 'w-5 h-5 text-white' />
113
+ </ Link >
114
+ </ TooltipTrigger >
115
+ < TooltipContent side = 'right' >
116
+ < p > { t ( 'subscription' ) } </ p >
117
+ </ TooltipContent >
118
+ </ Tooltip >
119
+ </ TooltipProvider >
120
+ < div className = 'flex items-center justify-center cursor-pointer w-sidebar h-sidebar' >
121
+ < Link
122
+ to = { ROUTES . PRIVATE . SETTING . PROFILES }
123
+ className = 'flex items-center justify-center'
124
+ >
125
+ < Avatar className = 'w-9 h-9 ' >
126
+ < AvatarImage src = { user ?. avatar as string } alt = { user ?. name } />
127
+ < AvatarFallback >
128
+ < span > { user ?. name ?. [ 0 ] } </ span >
129
+ </ AvatarFallback >
130
+ </ Avatar >
131
+ </ Link >
132
+ </ div >
133
+ < TooltipProvider >
77
134
< Tooltip >
78
- < TooltipTrigger >
79
- < li className = 'h-12 w-full flex items-center justify-center group' >
80
- < Link
81
- to = { item . to }
82
- className = 'w-full h-full flex items-center justify-center'
83
- >
84
- { item . Icon }
85
- </ Link >
86
- </ li >
135
+ < TooltipTrigger className = 'h-12 w-full flex items-center justify-center group' >
136
+ < div
137
+ className = 'w-full h-full flex items-center justify-center'
138
+ onClick = { ( ) => logoutMutation . mutate ( ) }
139
+ >
140
+ < LogOut className = 'w-5 h-5 text-white group-hover:opacity-85 transition-all' />
141
+ </ div >
87
142
</ TooltipTrigger >
88
143
< TooltipContent side = 'right' >
89
- < p > { t ( item . i18n as any ) } </ p >
144
+ < p > { t ( 'logout' ) } </ p >
90
145
</ TooltipContent >
91
146
</ Tooltip >
92
147
</ TooltipProvider >
93
- ) ) }
94
- </ ul >
95
- < div className = 'mt-auto' >
96
- < div className = 'flex items-center justify-center cursor-pointer w-sidebar h-sidebar' >
97
- < Link
98
- to = { ROUTES . PRIVATE . SETTING . PROFILES }
99
- className = 'flex items-center justify-center'
100
- >
101
- < Avatar className = 'w-9 h-9 ' >
102
- < AvatarImage src = { user ?. avatar as string } alt = { user ?. name } />
103
- < AvatarFallback >
104
- < span > { user ?. name ?. [ 0 ] } </ span >
105
- </ AvatarFallback >
106
- </ Avatar >
107
- </ Link >
108
148
</ div >
109
- < TooltipProvider >
110
- < Tooltip >
111
- < TooltipTrigger className = 'h-12 w-full flex items-center justify-center group' >
112
- < div
113
- className = 'w-full h-full flex items-center justify-center'
114
- onClick = { ( ) => logoutMutation . mutate ( ) }
115
- >
116
- < LogOut className = 'w-5 h-5 text-white group-hover:opacity-85 transition-all' />
117
- </ div >
118
- </ TooltipTrigger >
119
- < TooltipContent side = 'right' >
120
- < p > { t ( 'logout' ) } </ p >
121
- </ TooltipContent >
122
- </ Tooltip >
123
- </ TooltipProvider >
124
- </ div >
125
- </ nav >
126
- </ aside >
149
+ </ nav >
150
+ </ aside >
151
+ </ >
127
152
)
128
153
}
129
154
0 commit comments