From e30eb10d7da4e38d9d4c9740018e78ff9ef589b9 Mon Sep 17 00:00:00 2001
From: Timofey <timofey.syr17@gmail.com>
Date: Thu, 29 May 2025 13:34:47 +0300
Subject: [PATCH] locker buttons if user doesnt have required membership

---
 frontend/app/(urls)/account/routes/page.tsx | 89 ++++++++++++++++++---
 frontend/app/providers/AuthProvider.tsx     |  1 -
 frontend/app/types/index.ts                 |  3 +-
 frontend/components/AccountSidebar.tsx      | 36 +++------
 4 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/frontend/app/(urls)/account/routes/page.tsx b/frontend/app/(urls)/account/routes/page.tsx
index c3471e7..6b1a01b 100644
--- a/frontend/app/(urls)/account/routes/page.tsx
+++ b/frontend/app/(urls)/account/routes/page.tsx
@@ -5,11 +5,14 @@ import { Route } from '@/app/types'
 import Button from '@/components/ui/Button'
 import showToast from '@/components/ui/Toast'
 import Loader from '@/components/ui/Loader'
+import Link from 'next/link'
+import useUserStore from '@/app/store/userStore'
 
 export default function UserRoutes() {
   const [routes, setRoutes] = useState<Route[]>([])
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
+  const { user } = useUserStore()
 
   const fetchRoutes = async () => {
     try {
@@ -26,7 +29,6 @@ export default function UserRoutes() {
       }
 
       const data = await response.json()
-      console.log(data)
 
       setRoutes(data || [])
     } catch (error) {
@@ -105,6 +107,78 @@ export default function UserRoutes() {
     }
   }
 
+  const isLiteAccount = user?.account_type === 'lite'
+
+  const renderActionButtons = (route: Route) => {
+    if (isLiteAccount) {
+      return (
+        <div className="flex justify-between gap-2">
+          <Link
+            href="/payments"
+            className="flex items-center justify-center rounded-md border border-gray-300 bg-white/50 px-4 py-2 text-center text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50 focus:outline-none"
+            title="Доступно в тарифе Standart"
+          >
+            <span className="flex items-center gap-1">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="h-5 w-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
+                />
+              </svg>
+              Поднять в выдаче
+            </span>
+          </Link>
+          <Link
+            href="/payments"
+            className="flex items-center justify-center rounded-md border border-gray-300 bg-white/50 px-4 py-2 text-center text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50 focus:outline-none"
+            title="Доступно в тарифе Standart"
+          >
+            <span className="flex items-center gap-1">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="h-5 w-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
+                />
+              </svg>
+              Выделить
+            </span>
+          </Link>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex justify-between gap-2">
+        <Button
+          text="Поднять объявление"
+          className="border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none"
+          onClick={() => handleUpper(route)}
+        />
+        <Button
+          text={route.is_highlighted ? 'Уже выделено!' : 'Выделить рамкой'}
+          className="border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none"
+          onClick={() => handleHighlight(route)}
+        />
+      </div>
+    )
+  }
+
   if (loading) {
     return <Loader />
   }
@@ -197,18 +271,7 @@ export default function UserRoutes() {
                       </div>
                     </div>
                   )}
-                  <div className="flex justify-between">
-                    <Button
-                      text="Поднять объявление"
-                      className="border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none"
-                      onClick={() => handleUpper(route)}
-                    />
-                    <Button
-                      text="Выделить рамкой"
-                      className="border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none"
-                      onClick={() => handleHighlight(route)}
-                    />
-                  </div>
+                  {renderActionButtons(route)}
                 </div>
               ))}
             </div>
diff --git a/frontend/app/providers/AuthProvider.tsx b/frontend/app/providers/AuthProvider.tsx
index 3da6b49..60a1e47 100644
--- a/frontend/app/providers/AuthProvider.tsx
+++ b/frontend/app/providers/AuthProvider.tsx
@@ -44,7 +44,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
           image: userData.image,
           country: userData.country,
           city: userData.city,
-          plan: userData.plan,
           account_type: userData.account_type,
         })
         setAuthenticated(true)
diff --git a/frontend/app/types/index.ts b/frontend/app/types/index.ts
index 0ffcce5..d2929d0 100644
--- a/frontend/app/types/index.ts
+++ b/frontend/app/types/index.ts
@@ -113,8 +113,7 @@ export interface User {
   email: string
   country?: string
   city?: string
-  plan: MembershipPlans
-  account_type?: string // user или manager
+  account_type: string
 }
 
 export interface UserState {
diff --git a/frontend/components/AccountSidebar.tsx b/frontend/components/AccountSidebar.tsx
index 3da6c9c..d7c79b4 100644
--- a/frontend/components/AccountSidebar.tsx
+++ b/frontend/components/AccountSidebar.tsx
@@ -8,10 +8,7 @@ import { AccountSidebarProps } from '@/app/types'
 import Logout from './Logout'
 import noPhoto from '../public/images/noPhoto.png'
 
-const AccountSidebar: React.FC<AccountSidebarProps> = ({
-  user,
-  navigation,
-}) => {
+const AccountSidebar: React.FC<AccountSidebarProps> = ({ user, navigation }) => {
   const pathname = usePathname()
 
   if (!user) {
@@ -34,7 +31,7 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
 
   return (
     <div className="space-y-3">
-      <div className="flex items-center space-x-4 w-full bg-white rounded-2xl shadow p-4">
+      <div className="flex w-full items-center space-x-4 rounded-2xl bg-white p-4 shadow">
         <div className="flex items-center justify-center">
           {user.image ? (
             <Image
@@ -42,7 +39,7 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
               alt="Profile"
               height={84}
               width={84}
-              className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
+              className="aspect-square w-full rounded-2xl object-cover md:w-[84px]"
               priority
             />
           ) : (
@@ -52,47 +49,40 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
               height={84}
               width={84}
               priority
-              className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
+              className="aspect-square w-full rounded-2xl object-cover md:w-[84px]"
             />
           )}
         </div>
         <div className="space-y-1">
           <p className="text-xl font-bold">{user.name || 'Пользователь'}</p>
-          <p className="text-sm font-medium text-gray-500">
-            ID: {user.uuid || 'Not available'}
-          </p>
+          <p className="text-sm font-medium text-gray-500">ID: {user.uuid || 'Not available'}</p>
           {user.account_type && (
             <Link
               href="payments/"
               className={`${getAccountTypeStyles(
                 user.account_type
-              )} flex items-center justify-center py-1 px-3 text-sm rounded-lg`}
+              )} flex items-center justify-center rounded-lg px-3 py-1 text-sm`}
             >
-              {user.account_type.charAt(0).toUpperCase() +
-                user.account_type.slice(1)}
+              {user.account_type.charAt(0).toUpperCase() + user.account_type.slice(1)}
             </Link>
           )}
         </div>
       </div>
 
-      <div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
+      <div className="w-full rounded-2xl bg-white p-2 shadow md:w-64">
         <nav className="space-y-2">
-          {navigationItems.map((item) => {
+          {navigationItems.map(item => {
             const isActive = pathname === item.href
             return (
               <Link
                 key={item.name}
                 href={item.href}
                 className={`${
-                  isActive
-                    ? 'bg-orange text-white'
-                    : 'text-gray-600 hover:bg-gray-100'
-                } flex items-center p-4 text-sm font-medium rounded-lg transition-colors`}
+                  isActive ? 'bg-orange text-white' : 'text-gray-600 hover:bg-gray-100'
+                } flex items-center rounded-lg p-4 text-sm font-medium transition-colors`}
               >
                 <item.icon
-                  className={`mr-3 h-5 w-5 ${
-                    isActive ? 'text-white' : 'text-gray-400'
-                  }`}
+                  className={`mr-3 h-5 w-5 ${isActive ? 'text-white' : 'text-gray-400'}`}
                 />
                 {item.name}
               </Link>
@@ -100,7 +90,7 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
           })}
         </nav>
       </div>
-      <div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
+      <div className="w-full rounded-2xl bg-white p-2 shadow md:w-64">
         <Logout />
       </div>
     </div>