locker buttons if user doesnt have required membership

2025-05-29 13:34:47 +03:00
parent 91c6693190
commit e30eb10d7d
4 changed files with 90 additions and 39 deletions
--- 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>
--- 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)
--- 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 {
--- 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>