feature/BQ-282 into [email protected] 🐢 activity card page

app/(landing)/(components)/ActivitiesSection/ActivitiesSection.tsx

@@ -48,7 +48,6 @@ export const ActivitiesSection = async ({ cityId }: ActivitiesSectionProps) => {
         <Typography tag='h2' variant='h1' className='text-2xl md:text-[32px]'>
           <I18nText path='landing.activities.title' />
         </Typography>
-
         <Link href={ROUTES.APP.ACTIVITIES} className={buttonVariants({ variant: 'link' })}>
           <Typography tag='p' variant='h6'>
             <I18nText path='button.watchAll' />

app/app/(main)/activities/[id]/(components)/AddressItem/AddressItem.tsx

@@ -0,0 +1,58 @@
+import { ChevronRightIcon } from 'lucide-react';
+
+import { I18nText } from '@/components/common';
+import { Typography } from '@/components/ui';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@/components/ui/accordion';
+
+import { FreeTimeItem } from '../FreeTimeItem/FreeTimeItem';
+
+interface AddressItemProps {
+  schedule: Schedule;
+}
+
+export const AddressItem = ({ schedule }: AddressItemProps) => (
+  <Accordion type='single' collapsible className='rounded-lg border border-border px-3'>
+    <AccordionItem value='item-1' className='border-none'>
+      <AccordionTrigger>
+        {schedule.address.street}, {schedule.address.house}
+      </AccordionTrigger>
+      <AccordionContent className='space-y-3'>
+        <div className='flex gap-2'>
+          <Typography variant='sub3' tag='h3'>
+            <I18nText path='field.details.label' />
+          </Typography>
+          <Typography variant='body5' tag='p'>
+            {schedule?.details}
+          </Typography>
+        </div>
+        <div className='flex flex-col gap-3 md:flex-row'>
+          <div className='w-1/3 min-w-60'>
+            <Typography variant='sub3' tag='h3' className='flex-1'>
+              <I18nText path='field.nearestFreeTime.label' />
+            </Typography>
+          </div>
+          <div className='flex flex-wrap gap-3'>
+            {schedule.nearestFreeTime?.map((time) => <FreeTimeItem time={time} />)}
+          </div>
+        </div>
+        <div className='flex'>
+          <Typography variant='sub3' tag='h3' className='flex-1'>
+            <I18nText path='field.chooseAnotherTime.label' />
+          </Typography>
+          <ChevronRightIcon className='stroke-muted-foreground' />
+        </div>
+        <div className='flex'>
+          <Typography variant='sub3' tag='h3' className='flex-1'>
+            <I18nText path='field.goToSupportChat.label' />
+          </Typography>
+          <ChevronRightIcon className='stroke-muted-foreground' />
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+);

app/app/(main)/activities/[id]/(components)/FreeTimeItem/FreeTimeItem.tsx

@@ -0,0 +1,27 @@
+import { CalendarIcon } from 'lucide-react';
+
+import { I18nText } from '@/components/common';
+import { Typography } from '@/components/ui';
+
+interface FreeTimeItemProps {
+  time: FreeTime;
+}
+
+export const FreeTimeItem = ({ time }: FreeTimeItemProps) => {
+  const monthNumber = new Date(time.date).getMonth() + 1;
+  const dayNumber = new Date(time.date).getDay() + 1;
+
+  return (
+    <div className='flex h-10 w-56 items-center justify-evenly rounded-lg border border-secondary '>
+      <div className='flex items-center gap-2'>
+        <CalendarIcon className='stroke-taiga' />
+        <Typography variant='sub6' tag='p'>
+          {time.time}
+        </Typography>
+      </div>
+      <Typography variant='sub6' tag='p'>
+        {dayNumber} <I18nText path={`month.${monthNumber}` as LocaleMessageId} />
+      </Typography>
+    </div>
+  );
+};

app/app/(main)/activities/[id]/page.tsx

@@ -0,0 +1,56 @@
+import { I18nText } from '@/components/common';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Typography
+} from '@/components/ui';
+import { getActivityById } from '@/utils/api';
+import { ROUTES } from '@/utils/constants';
+
+import { AddressItem } from './(components)/AddressItem/AddressItem';
+
+interface ActivityPageProps {
+  params: { activityId: string };
+}
+
+const ActivityPage = async ({ params }: ActivityPageProps) => {
+  const getActivityByIdResponse = await getActivityById({
+    params: { id: '1' },
+    config: {
+      cache: 'no-store'
+    }
+  });
+
+  console.log(params.activityId);
+
+  return (
+    <section className='container py-[108px]'>
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem className='list-none text-base'>
+            <BreadcrumbLink href={ROUTES.APP.ACTIVITIES}>
+              <I18nText path='landing.activities.title' />
+            </BreadcrumbLink>
+            <BreadcrumbSeparator />
+            <BreadcrumbPage>{getActivityByIdResponse.name}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div>Тут блок с картинками </div>
+      <div className='space-y-5'>
+        <Typography tag='h5' variant='h7'>
+          <I18nText path='landing.adresses.title' />
+        </Typography>
+        {getActivityByIdResponse.schedule?.map((schedule, index) => (
+          <AddressItem key={index} schedule={schedule} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default ActivityPage;

mock/requests/activity/id/get.ts

@@ -5,27 +5,96 @@ export const getActivityById: RestRequestConfig = {
   method: 'get',
   routes: [
     {
-      data: [
-        {
-          id: '1',
-          cover: '',
-          content: [],
-          name: 'Рисуем живопись',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ',
-          ageLimit: [7, 13],
-          price: 700,
-          duration: 120,
-          replay: false,
-          view: 'ONLINE',
-          status: 'PUBLISHED',
-          category: 'Образование',
-          participants: 600,
-          likes: 210,
-          nutsCount: 0,
-          schedule: []
-        }
-      ],
+      data: {
+        id: '1',
+        cover: '',
+        content: [],
+        name: 'Рисуем живопись',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ',
+        ageLimit: [7, 13],
+        price: 700,
+        duration: 120,
+        replay: false,
+        view: 'ONLINE',
+        status: 'PUBLISHED',
+        category: 'Образование',
+        participants: 600,
+        likes: 210,
+        nutsCount: 0,
+        schedule: [
+          {
+            address: {
+              country: 'Russia',
+              city: 'Moscow',
+              street: 'Red Square',
+              house: '1',
+              geoLat: 55.7539,
+              geoLon: 37.6208
+            },
+            leadingEmployeeId: 'employee1',
+            entry: true,
+            regular: false,
+            date: new Date('2024-05-05'),
+            time: {
+              hours: 10,
+              minutes: 30
+            },
+            maxNumberOfParticipants: 20,
+            period: [7, 14, 21],
+            details: '3 этаж, вход с ТЦ',
+            nearestFreeTime: [
+              {
+                date: new Date('2024-05-02'),
+                time: '12:32'
+              },
+              {
+                date: new Date('2024-03-05'),
+                time: '13:31'
+              },
+              {
+                date: new Date('2024-05-03'),
+                time: '11:32'
+              }
+            ]
+          },
+          {
+            address: {
+              country: 'Russia',
+              city: 'Saint Petersburg',
+              street: 'Nevsky Prospect',
+              house: '2',
+              geoLat: 59.9343,
+              geoLon: 30.3351
+            },
+            leadingEmployeeId: 'employee2',
+            entry: true,
+            regular: false,
+            date: new Date('2024-05-10'),
+            time: {
+              hours: 14,
+              minutes: 0
+            },
+            maxNumberOfParticipants: 15,
+            period: [7, 14, 21],
+            details: '3 этаж, вход с ТЦ',
+            nearestFreeTime: [
+              {
+                date: new Date('2024-05-02'),
+                time: '12:32'
+              },
+              {
+                date: new Date('2024-03-05'),
+                time: '13:31'
+              },
+              {
+                date: new Date('2024-05-03'),
+                time: '11:32'
+              }
+            ]
+          }
+        ]
+      },
       entities: { params: { id: 1 } }
     }
   ]

src/components/ui/typography.tsx

@@ -18,10 +18,12 @@ const typographyVariants = cva('text-foreground', {
       sub3: 'leading-5 font-medium text-base',
       sub4: 'leading-5 font-medium text-sm',
       sub5: 'leading-[14px] font-medium text-sm',
+      sub6: 'leading-[14px] font-normal text-sm text-gray-two',
       body1: 'leading-5 font-normal text-lg text-muted-foreground',
       body2: 'leading-5 font-normal text-base',
       body3: 'leading-4 font-normal text-sm text-muted-foreground',
-      body4: 'leading-[14px] font-normal text-[12px]'
+      body4: 'leading-[14px] font-normal text-[12px]',
+      body5: 'leading-[14px] font-normal text-base text-gray-two'
     }
   },
   defaultVariants: {

src/utils/api/api.d.ts

@@ -211,6 +211,11 @@ interface Time {
   minutes: number;
 }
 
+interface FreeTime {
+  date: string;
+  time: string;
+}
+
 interface Schedule {
   address: {
     country?: string;
@@ -228,6 +233,8 @@ interface Schedule {
     settlement?: string;
     settlementWithType?: string;
   };
+  nearestFreeTime?: FreeTime[];
+  details?: string;
   leadingEmployeeId: string;
   entry: boolean;
   regular: boolean;

src/utils/api/requests/activity/id/index.ts

@@ -8,3 +8,11 @@ export type PutActivityByIdRequestConfig = RequestConfig<PutActivityByIdParams>;
 
 export const putActivityById = async ({ params, config }: PutActivityByIdRequestConfig) =>
   api.put(`activity/${params.id}`, params, config);
+
+export interface GetActivtiyByIdParams {
+  id: string;
+}
+export type GetActivityByIdRequestConfig = RequestConfig<GetActivtiyByIdParams>;
+
+export const getActivityById = async ({ params, config }: GetActivityByIdRequestConfig) =>
+  api.get<ActivityResponse>(`activity/${params.id}`, config);

static/locales/ru.json

@@ -171,6 +171,9 @@
   "field.street.label": "Улица",
   "field.street.placeholder": "ул.",
   "field.details.label": "Детали",
+  "field.nearestFreeTime.label": "Ближайшее свободное время",
+  "field.chooseAnotherTime.label": "Выбрать другое время",
+  "field.goToSupportChat.label": "Перейти в чат с поддержкой",
   "field.details.placeholder": "офис, вход, этаж",
   "field.note.placeholder": "Оставьте заметку...",
   "field.title.label": "Название",
@@ -303,6 +306,19 @@
   "dayOfWeek.7": "Вс",
   "dayOfWeek.dayOff": "Выходной",
 
+  "month.1": "Января",
+  "month.2": "Февраля",
+  "month.3": "Марта",
+  "month.4": "Апреля",
+  "month.5": "Мая",
+  "month.6": "Июня",
+  "month.7": "Июля",
+  "month.8": "Августа",
+  "month.9": "Сентября",
+  "month.10": "Октября",
+  "month.11": "Ноября",
+  "month.12": "Декабря",
+
   "addressCard.description.workingTime": "Время работы",
 
   "table.column.status": "Статус",
@@ -369,6 +385,7 @@
 
   "landing.info.subtitle": "Более <green>4000+ пользователей</green> уже с нами,{br} присоединяйся!",
   "landing.activities.title": "Активности",
+  "landing.adresses.title": "Адреса",
   "landing.activities.card.duration": "{duration} мин",
   "landing.activities.card.minimumAge": "{age}+ лет",
   "landing.activitiesMap.title": "Поиск активностей на карте",