From 384119672f65bf4f110e067c94ca9cd726c65b21 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 4 Sep 2025 14:47:24 +0300
Subject: [PATCH] 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.
---
 .../app/(main)/profile/[telegramId]/page.tsx  |  3 +
 .../profile/services/services-list.tsx        | 71 +++++++++++++++----
 2 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/apps/web/app/(main)/profile/[telegramId]/page.tsx b/apps/web/app/(main)/profile/[telegramId]/page.tsx
index 8f440d5..ead4f58 100644
--- a/apps/web/app/(main)/profile/[telegramId]/page.tsx
+++ b/apps/web/app/(main)/profile/[telegramId]/page.tsx
@@ -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
diff --git a/apps/web/components/profile/services/services-list.tsx b/apps/web/components/profile/services/services-list.tsx
index fd35dd1..87f6178 100644
--- a/apps/web/components/profile/services/services-list.tsx
+++ b/apps/web/components/profile/services/services-list.tsx
@@ -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,
+  };
+}