161 lines
8.4 KiB
TypeScript
161 lines
8.4 KiB
TypeScript
import * as React from "react";
|
||
import Link from 'next/link';
|
||
import { useRouter } from 'next/router';
|
||
import { useQuery } from '@apollo/client';
|
||
import { useIsClient } from '@/lib/useIsomorphicLayoutEffect';
|
||
import { GET_CLIENT_ME } from '@/lib/graphql';
|
||
|
||
const menuItems = [
|
||
{ label: 'Заказы', href: '/profile-orders', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/22ecd7e6251abe04521d03f0ac09f73018a8c2c8?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'История поиска', href: '/profile-history', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/e7688217cca08e8c080ec07f80bf1142429d899c?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Уведомления', href: '/profile-announcement', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/7505ecbdf10660110c88e1641f43b4618fef292d?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Оповещения', href: '/profile-notification', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/f7a4dd35c3365eb1f1e7292f9b6194b8a3083c4f?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Адреса доставки', href: '/profile-addresses', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/1faca7190a7dd71a66fd3cf0127a8c6e45eac5e6?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Гараж', href: '/profile-gar', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/783501855b4cb8be4ac47a0733e298c3f3ccfc5e?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Настройки аккаунта', href: '/profile-set', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/b39907028aa6baf08adc313aed84d1294f2be013?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Настройки cookies', href: '/profile-cookie-settings', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/b39907028aa6baf08adc313aed84d1294f2be013?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
];
|
||
|
||
const financeItems = [
|
||
{ label: 'Баланс', href: '/profile-balance', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/135ee20623aaa1f29816106bd0ca1a627976969d?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Реквизиты', href: '/profile-req', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/0890fb36a7fb89b3942f93be72ac0e79d93bc530?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
// { label: 'Взаиморасчеты', href: '/profile-settlements', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/74b08742b16c7daefb4d895173a6d749eb61fd94?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
{ label: 'Акты сверки', href: '/profile-acts', icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/22ecd7e6251abe04521d03f0ac09f73018a8c2c8?placeholderIfAbsent=true&apiKey=f5bc5a2dc9b841d0aba1cc6c74a35920' },
|
||
];
|
||
|
||
function normalizePath(path: string) {
|
||
return path.replace(/\/+$/, '');
|
||
}
|
||
|
||
const LKMenu = React.forwardRef<HTMLDivElement>((props, ref) => {
|
||
const router = useRouter();
|
||
const isClient = useIsClient();
|
||
|
||
// Получаем данные клиента для проверки наличия юридических лиц
|
||
const { data: clientData } = useQuery(GET_CLIENT_ME, {
|
||
skip: !isClient,
|
||
errorPolicy: 'ignore' // Игнорируем ошибки, чтобы не ломать интерфейс
|
||
});
|
||
|
||
// Проверяем есть ли у клиента юридические лица
|
||
const hasLegalEntities = clientData?.clientMe?.legalEntities && clientData.clientMe.legalEntities.length > 0;
|
||
|
||
const handleLogout = () => {
|
||
if (isClient) {
|
||
localStorage.removeItem('authToken');
|
||
localStorage.removeItem('userData');
|
||
window.location.href = '/';
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div ref={ref} className="flex flex-col max-w-xs max-md:w-full max-md:max-w-full w-full text-xl font-semibold leading-none text-gray-950">
|
||
<div className="flex flex-col px-4 pt-4 pb-6 w-full bg-white rounded-3xl">
|
||
<div className="gap-2.5 self-start px-2.5 pt-2.5 text-gray-950">
|
||
Личный кабинет
|
||
</div>
|
||
<div className="flex flex-col mt-3 w-full text-base leading-snug text-gray-600">
|
||
{menuItems
|
||
.filter(item => !['Уведомления', 'Оповещения'].includes(item.label)) // Временно скрываем эти пункты
|
||
.map((item) => {
|
||
const isActive = normalizePath(router.asPath) === normalizePath(item.href);
|
||
return (
|
||
<Link href={item.href} key={item.href}>
|
||
<div
|
||
className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
|
||
isActive ? 'bg-slate-200' : 'bg-white'
|
||
}`}
|
||
>
|
||
<img
|
||
loading="lazy"
|
||
src={item.icon}
|
||
className="object-contain shrink-0 self-stretch my-auto w-5 aspect-square"
|
||
alt={item.label}
|
||
/>
|
||
<div className="self-stretch my-auto text-gray-600">{item.label}</div>
|
||
</div>
|
||
</Link>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Раздел "Финансы" показываем только если есть юридические лица */}
|
||
{hasLegalEntities && (
|
||
<>
|
||
<div className="gap-2.5 self-start px-2.5 pt-2.5 mt-3 whitespace-nowrap text-gray-950">
|
||
Финансы
|
||
</div>
|
||
<div className="flex flex-col mt-3 w-full text-base leading-snug text-gray-600">
|
||
{financeItems.map((item) => {
|
||
const isActive = normalizePath(router.asPath) === normalizePath(item.href);
|
||
return (
|
||
<Link href={item.href} key={item.href}>
|
||
<div
|
||
className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
|
||
isActive ? 'bg-slate-200' : 'bg-white'
|
||
}`}
|
||
>
|
||
<img
|
||
loading="lazy"
|
||
src={item.icon}
|
||
className="object-contain shrink-0 self-stretch my-auto w-5 aspect-square"
|
||
alt={item.label}
|
||
/>
|
||
<div className="self-stretch my-auto text-gray-600">{item.label}</div>
|
||
</div>
|
||
</Link>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Кнопка выхода */}
|
||
<div className="mt-3">
|
||
<button
|
||
onClick={handleLogout}
|
||
className="flex gap-2.5 items-center px-2.5 py-2 w-full text-base leading-snug text-gray-600 rounded-lg bg-white hover:bg-slate-200 font-normal"
|
||
tabIndex={0}
|
||
aria-label="Выйти из аккаунта"
|
||
>
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 20 20"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="object-contain shrink-0 self-stretch my-auto w-5 aspect-square text-gray-600"
|
||
>
|
||
<path
|
||
d="M7 17L3 17C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15L1 5C1 4.46957 1.21071 3.96086 1.58579 3.58579C1.96086 3.21071 2.46957 3 3 3L7 3"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
<path
|
||
d="M14 13L19 10L14 7"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
<path
|
||
d="M19 10L7 10"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
<div className="self-stretch my-auto text-gray-600 text-[16px]">Выйти</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
LKMenu.displayName = 'LKMenu';
|
||
|
||
export default LKMenu;
|