feat(profile): add MasterServicesList component to display services for profile masters

- Introduced the MasterServicesList component to show services associated with a master profile.
- Updated ProfilePage to conditionally render MasterServicesList based on user role.
- Refactored services fetching logic into a new useMasterServices hook for better reusability.
This commit is contained in:
vchikalkin 2025-09-04 14:47:24 +03:00
parent d870fa5a21
commit 04739612ca
2 changed files with 61 additions and 13 deletions

View File

@ -3,6 +3,7 @@ import { getSessionUser } from '@/actions/session';
import { Container } from '@/components/layout';
import { PageHeader } from '@/components/navigation';
import { ContactDataCard, PersonCard, ProfileOrdersList } from '@/components/profile';
import { MasterServicesList } from '@/components/profile/services';
import { BookButton } from '@/components/shared/book-button';
import { isCustomerMaster } from '@repo/utils/customer';
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
@ -33,6 +34,7 @@ export default async function ProfilePage(props: Readonly<Props>) {
// Определяем роли и id
const isMaster = isCustomerMaster(currentUser);
const isProfileMaster = isCustomerMaster(profile);
const masterId = isMaster ? currentUser.documentId : profile.documentId;
const clientId = isMaster ? profile.documentId : currentUser.documentId;
@ -42,6 +44,7 @@ export default async function ProfilePage(props: Readonly<Props>) {
<Container className="px-0">
<PersonCard telegramId={contactTelegramId} />
<ContactDataCard telegramId={contactTelegramId} />
{isProfileMaster && <MasterServicesList masterId={profile.documentId} />}
<ProfileOrdersList telegramId={contactTelegramId} />
{masterId && clientId && (
<BookButton

View File

@ -3,25 +3,46 @@
import { ServiceCard } from '@/components/shared/service-card';
import { useCustomerQuery } from '@/hooks/api/customers';
import { useServicesQuery } from '@/hooks/api/services';
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
import Link from 'next/link';
export function ServicesList() {
const { data: { customer } = {}, isLoading } = useCustomerQuery();
type MasterServicesListProps = {
masterId: string;
};
const { data: { services } = {} } = useServicesQuery({
filters: {
master: {
documentId: {
eq: customer?.documentId,
},
},
},
});
// Компонент для отображения услуг мастера (без ссылок, только просмотр)
export function MasterServicesList({ masterId }: Readonly<MasterServicesListProps>) {
const { isLoading, services } = useMasterServices(masterId);
if (isLoading || !customer) return null;
if (isLoading) return <LoadingSpinner />;
if (!services?.length) return null;
return (
<div className="space-y-2 px-6">
<div className="space-y-2 px-4">
<h1 className="font-bold">Услуги</h1>
{services?.map(
(service) =>
service?.active && (
<div key={service.documentId}>
<ServiceCard {...service} />
</div>
),
)}
</div>
);
}
// Компонент для отображения услуг текущего пользователя (с ссылками)
export function ServicesList() {
const { isLoading, services } = useMasterServices();
if (isLoading) return null;
if (!services?.length) return null;
return (
<div className="space-y-2 px-4">
{services?.map(
(service) =>
service && (
@ -35,3 +56,27 @@ export function ServicesList() {
</div>
);
}
// Общий хук для получения услуг мастера
function useMasterServices(masterId?: string) {
const { data: { customer } = {}, isLoading } = useCustomerQuery();
// Используем переданный masterId или текущего пользователя
const targetMasterId = masterId || customer?.documentId;
const { data: { services } = {} } = useServicesQuery({
filters: {
master: {
documentId: {
eq: targetMasterId,
},
},
},
});
return {
isLoading: isLoading || !targetMasterId,
masterId: targetMasterId,
services,
};
}