feat: add session styles, fix expert list

src/actions/experts.ts

@@ -1,7 +1,7 @@
 import { apiClient } from '../lib/apiClient';
 import { GeneralFilter, ExpertsData, ExpertDetails } from '../types/experts';
 
-export const getExpertsList = async (filter: GeneralFilter, locale: string) => {
+export const getExpertsList = async (locale: string, filter?: GeneralFilter) => {
     const response = await apiClient.post(
         '/home/coachsearch1',
     { ...filter },

src/app/[locale]/experts/[expertId]/page.tsx

@@ -20,15 +20,7 @@ export async function generateStaticParams({
     params: { locale },
 }: { params: { locale: string } }) {
     const result: { locale: string, expertId: string }[] = [];
-    const experts = await getExpertsList({
+    const experts = await getExpertsList(locale, { themesTagIds: [] });
-        "themesTagIds": [
-            1,2,3,4,5,6,7,8
-        ],
-        "priceFrom": null,
-        "priceTo": null,
-        "durationFrom": null,
-        "durationTo": null
-    }, locale);
 
     experts?.coaches?.forEach(({ id }) => {
         result.push({ locale, expertId: id.toString() });
@@ -118,7 +110,7 @@ export default async function ExpertItem({ params: { expertId = '', locale} }: {
                 {expert?.publicCoachDetails?.experiences && expert.publicCoachDetails.experiences?.map(generateDescription)}
                 <ExpertPractice expert={expert} />
 
-                <h2 className="title-h2">All Offers by this Expert</h2>
+                {/* <h2 className="title-h2">All Offers by this Expert</h2>
                 <div className="offers-list">
                     <div className="card-profile">
                         <div className="card-profile__skills">
@@ -164,7 +156,7 @@ export default async function ExpertItem({ params: { expertId = '', locale} }: {
                             </a>
                         </div>
                     </div>
-                </div>
+                </div> */}
             </div>
         </div>
     );

src/components/Account/sessions/SessionDetails.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { Tag } from 'antd';
+import { Tag, Button } from 'antd';
-import { RightOutlined } from '@ant-design/icons';
+import { RightOutlined, PlusOutlined, LeftOutlined } from '@ant-design/icons';
 import Image from 'next/image';
 import dayjs from 'dayjs';
 import { Link } from '../../../navigation';
 import { i18nText } from '../../../i18nKeys';
 import { getDuration, getPrice } from '../../../utils/expert';
-import { Session } from '../../../types/sessions';
+import {PublicUser, Session} from '../../../types/sessions';
 import { AUTH_TOKEN_KEY, AUTH_USER } from '../../../constants/common';
 import { getSessionDetails } from '../../../actions/profile';
 import { useLocalStorage } from '../../../hooks/useLocalStorage';
@@ -18,15 +18,18 @@ type SessionDetailsProps = {
     locale: string;
     sessionId: number;
     goBack: () => void;
+    activeTab: number;
 };
 
-export const SessionDetails = ({ sessionId, locale, goBack }: SessionDetailsProps) => {
+export const SessionDetails = ({ sessionId, locale, goBack, activeTab }: SessionDetailsProps) => {
     const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
     const [userId] = useLocalStorage(AUTH_USER, '');
     const [loading, setLoading] = useState<boolean>(false);
     const [errorData, setErrorData] = useState<any>();
     const [session, setSession] = useState<Session>();
 
+    console.log('activeTab', activeTab);
+
     const fetchData = useCallback(() => {
         setLoading(true);
         setErrorData(undefined);
@@ -49,12 +52,82 @@ export const SessionDetails = ({ sessionId, locale, goBack }: SessionDetailsProp
         fetchData();
     }, [sessionId]);
 
-    const client = session?.clients?.length ? session?.clients[0] : null;
-    const current = +userId !== client?.id ? client : session?.coach;
     const startDate = session?.scheduledStartAtUtc ? dayjs(session?.scheduledStartAtUtc).locale(locale) : null;
     const endDate = session?.scheduledEndAtUtc ? dayjs(session?.scheduledEndAtUtc).locale(locale) : null;
     const today = startDate ? dayjs().format('YYYY-MM-DD') === startDate.format('YYYY-MM-DD') : false;
 
+    const CoachCard = (coach?: PublicUser) => coach ? (
+        <div className="card-detail__expert">
+            <div className="card-detail__portrait">
+                <Image src={coach?.faceImageUrl || '/images/person.png'} width={140} height={140} alt="" />
+            </div>
+            <div className="card-detail__inner">
+                <Link href={`/experts/${coach?.id}` as any} target="_blank">
+                    <div className="card-detail__name">{`${coach?.name} ${coach?.surname || ''}`}</div>
+                </Link>
+                {/* <div className="card-detail__info">
+                    <div className="card-profile__subtitle">{coach?.specialityDesc}</div>
+                    <div className="card-detail__lang">
+                        {coach?.coachLanguages?.map((lang) => (
+                            <Tag key={lang} className="skills__list__item">{lang}</Tag>
+                        ))}
+                    </div>
+                </div> */}
+                <div className="card-detail__cost">
+                    {getPrice(session?.cost)} <span>/ {getDuration(locale, session?.totalDuration)}</span>
+                </div>
+                <div className={`card-detail__date${today ? ' chosen': ''}${activeTab === 2 ? ' history' : ''}`}>
+                    {today
+                        ? `${i18nText('today', locale)} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`
+                        : `${startDate?.format('D MMMM')} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`}
+                </div>
+                <div className="card-detail__skills">
+                    <div className="skills__list">
+                        {session?.themesTags?.slice(0, 2).map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
+                        {session?.themesTags?.length > 2
+                            ? (
+                                <Tag className="skills__list__more">
+                                    <Link href={`/experts/${coach?.id}` as any} target="_blank">
+                                        {`+${session?.themesTags?.length - 2}`}
+                                    </Link>
+                                </Tag>
+                            ) : null }
+                    </div>
+                </div>
+                {/* <div className="card-profile__desc">{coach?.description}</div> */}
+                <Link href={`/experts/${coach?.id}` as any} target="_blank" className="card-detail__more">
+                    {i18nText('details', locale)}
+                    <RightOutlined style={{ fontSize: '10px', padding: '0 7px' }}/>
+                </Link>
+            </div>
+        </div>
+    ) : null;
+
+    const StudentCard = (student?: PublicUser | null) => student ? (
+        <div className="card-detail__expert">
+            <div className="card-detail__portrait">
+                <Image src={student?.faceImageUrl || '/images/person.png'} width={140} height={140} alt="" />
+            </div>
+            <div className="card-detail__inner">
+                <div className="card-detail__name">{`${student?.name} ${student?.surname || ''}`}</div>
+                <div className={`card-detail__date${today ? ' chosen': ''}${activeTab === 2 ? ' history' : ''}`}>
+                    {today
+                        ? `${i18nText('today', locale)} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`
+                        : `${startDate?.format('D MMMM')} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`}
+                </div>
+                <div className="card-detail__skills">
+                    <div className="skills__list">
+                        <Tag className="skills__list__item">{session?.themesTagName}</Tag>
+                    </div>
+                </div>
+                {/* <div className="card-profile__desc">{student?.description}</div> */}
+            </div>
+        </div>
+    ) : null;
+
+    const client = session?.clients?.length ? session?.clients[0] : null;
+    const Current = +userId !== client?.id ? StudentCard(client) : CoachCard(session?.coach);
+
     return (
         <Loader
             isLoading={loading}
@@ -63,74 +136,91 @@ export const SessionDetails = ({ sessionId, locale, goBack }: SessionDetailsProp
         >
             <div className="card-detail">
                 <div>
-                    <button onClick={goBack}>back</button>
+                    <Button
+                        className="card-detail__back"
+                        type="link"
+                        icon={<LeftOutlined />}
+                        onClick={goBack}
+                    >
+                        Back
+                    </Button>
                 </div>
-                <div className="card-detail__expert">
+                {Current}
-                    <div className="card-detail__portrait">
+                {(activeTab === 0 || activeTab === 1) && (
-                        <Image src={current?.faceImageUrl || '/images/person.png'} width={140} height={140} alt="" />
+                    <div className="card-detail__actions">
+                        {activeTab === 0 ? (
+                            <>
+                                <Button className="card-detail__apply">Start Session</Button>
+                                <Button className="card-detail__decline">Decline Session</Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button className="card-detail__apply">Confirm Session</Button>
+                                <Button className="card-detail__decline">Decline Session</Button>
+                            </>
+                        )}
                     </div>
-                    <div className="card-detail__inner">
+                )}
-                        <Link href={`/experts/${current?.id}` as any} target="_blank">
+                {activeTab !== 1 && (
-                            <div className="card-detail__name">{`${current?.name} ${current?.surname || ''}`}</div>
+                    <>
-                        </Link>
+                        {activeTab === 2 && (
-                        <div className="card-detail__info">
+                            <>
-                            <div className="card-detail__lang">
+                                <div className="card-detail__name">Course Info</div>
-                                {/* current?.coachLanguages?.map((lang) => (
+                                <div className="card-detail__inner">
-                                <Tag key={lang} className="skills__list__item">{lang}</Tag>
+                                    {/* <div className="card-detail__info">
-                            )) */}
+                                        <div className="card-profile__subtitle">{current?.specialityDesc}</div>
+                                        <div className="card-detail__lang">
+                                            {current?.coachLanguages?.map((lang) => (
+                                                <Tag key={lang} className="skills__list__item">{lang}</Tag>
+                                            ))}
+                                        </div>
+                                    </div> */}
+                                    <div className="card-detail__cost">
+                                        {getPrice(session?.cost)} <span>/ {getDuration(locale, session?.totalDuration)}</span>
+                                    </div>
+                                    <div className="card-detail__skills">
+                                        <div className="skills__list">
+                                            {session?.themesTags?.slice(0, 2).map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
+                                            {session?.themesTags?.length > 2
+                                                ? (
+                                                    <Tag className="skills__list__more">
+                                                        {`+${session?.themesTags?.length - 2}`}
+                                                    </Tag>
+                                                ) : null }
+                                        </div>
+                                    </div>
+                                    {/* <div className="card-profile__desc">{current?.description}</div> */}
+                                </div>
+                            </>
+                        )}
+                        <div className="card-detail__comments">
+                            <div className="card-detail__comments_header">
+                                <div className="card-detail__comments_title">
+                                    My Comments
+                                </div>
+                                {activeTab === 0 && (
+                                    <Button
+                                        className="card-detail__comments_add"
+                                        type="link"
+                                        iconPosition="end"
+                                        icon={<PlusOutlined style={{ fontSize: 18 }} />}
+                                    >
+                                        Add new
+                                    </Button>
+                                )}
+                            </div>
+                            <div className="card-detail__comments_item">
+                                Sed tincidunt finibus eros nec feugiat. Nulla facilisi. Nunc maximus magna et egestas tincidunt. Integer lobortis laoreet neque at sodales. Aenean eget risus pharetra, efficitur dolor ut, commodo lacus. Sed vitae nunc odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et velit et dolor rutrum euismod a pretium est.
+                            </div>
+                            <div className="card-detail__comments_title">
+                                Coach Comments
+                            </div>
+                            <div className="card-detail__comments_item">
+                                Sed tincidunt finibus eros nec feugiat. Nulla facilisi. Nunc maximus magna et egestas tincidunt. Integer lobortis laoreet neque at sodales. Aenean eget risus pharetra, efficitur dolor ut, commodo lacus. Sed vitae nunc odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et velit et dolor rutrum euismod a pretium est.
                             </div>
                         </div>
-                        {/*  <div className="card-profile__title">{current?.speciality}</div> */}
+                    </>
-                        <div className="card-detail__coast">
+                )}
-                            {getPrice(session?.cost)} <span>/ {getDuration(locale, session?.totalDuration)}</span>
-                        </div>
-                        <div className={`card-detail__date${today ? ' chosen': ''}`}>
-                            {today
-                                ? `${i18nText('today', locale)} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`
-                                : `${startDate.format('D MMMM')} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`}
-                        </div>
-                        <div className="card-detail__skills">
-                            <div className="skills__list">
-                                {session?.themesTags?.slice(0, 2).map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
-                                {session?.themesTags?.length > 2
-                                ? (
-                                    <Tag className="skills__list__more">
-                                        <Link href={`/experts/${current?.id}` as any} target="_blank">
-                                            {`+${session?.themesTags?.length - 2}`}
-                                        </Link>
-                                    </Tag>
-                                ) : null }
-                            </div>
-                        </div>
-                        {/* <div className="card-profile__subtitle">{current?.specialityDesc}</div>
-                        <div className="card-profile__desc">{current?.description}</div> */}
-                        <Link href={`/experts/${current?.id}` as any} target="_blank">
-                            {i18nText('details', locale)}
-                            <RightOutlined style={{ fontSize: '10px', padding: '0 7px' }}/>
-                        </Link>
-                    </div>
-                </div>
-                <div className="card-detail__actions">
-                    <button>Start Session</button>
-                    <button>Decline Session</button>
-                </div>
-                <div className="card-detail__comments">
-                    <div className="card-detail__comments_header">
-                        <div className="card-detail__comments_title">
-                            My Comments
-                        </div>
-                        <button>Add new</button>
-                    </div>
-                    <div className="card-detail__comments_item">
-                        Sed tincidunt finibus eros nec feugiat. Nulla facilisi. Nunc maximus magna et egestas tincidunt. Integer lobortis laoreet neque at sodales. Aenean eget risus pharetra, efficitur dolor ut, commodo lacus. Sed vitae nunc odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et velit et dolor rutrum euismod a pretium est.
-                    </div>
-                    <div className="card-detail__comments_title">
-                        Coach Comments
-                    </div>
-                    <div className="card-detail__comments_item">
-                        Sed tincidunt finibus eros nec feugiat. Nulla facilisi. Nunc maximus magna et egestas tincidunt. Integer lobortis laoreet neque at sodales. Aenean eget risus pharetra, efficitur dolor ut, commodo lacus. Sed vitae nunc odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et velit et dolor rutrum euismod a pretium est.
-                    </div>
-                </div>
             </div>
         </Loader>
     );

src/components/Account/sessions/SessionsTabs.tsx

@@ -19,10 +19,11 @@ import { i18nText } from '../../../i18nKeys';
 type SessionsTabsProps = {
     locale: string;
     updateSession: (val: number) => void;
+    activeTab: number;
+    updateTab: (tab: number) => void;
 };
 
-export const SessionsTabs = ({ locale, updateSession }: SessionsTabsProps) => {
+export const SessionsTabs = ({ locale, updateSession, activeTab, updateTab }: SessionsTabsProps) => {
-    const [activeTab, setActiveTab] = useState<number>(0);
     const [sort, setSort] = useState<string>();
     const [sessions, setSessions] = useState<Sessions>();
     const [loading, setLoading] = useState<boolean>(true);
@@ -158,7 +159,7 @@ export const SessionsTabs = ({ locale, updateSession }: SessionsTabsProps) => {
                     <Space
                         key={index}
                         className={`tabs-session__item ${index === activeTab ? 'active' : ''}`}
-                        onClick={() => setActiveTab(index)}
+                        onClick={() => updateTab(index)}
                     >
                         {tab.label}
                     </Space>

src/components/Account/sessions/index.tsx

@@ -6,17 +6,21 @@ import { SessionsTabs } from './SessionsTabs';
 
 export const SessionsAll = ({ locale }: { locale: string }) => {
     const [customSession, setCustomSession] = useState<number | undefined>();
+    const [activeTab, setActiveTab] = useState<number>(0);
 
     return customSession ? (
         <SessionDetails
             locale={locale}
             sessionId={customSession}
             goBack={() => setCustomSession(undefined)}
+            activeTab={activeTab}
         />
     ) : (
         <SessionsTabs
             locale={locale}
             updateSession={setCustomSession}
+            activeTab={activeTab}
+            updateTab={setActiveTab}
         />
     );
 };

src/components/Experts/ExpertDetails.tsx

@@ -79,7 +79,7 @@ export const ExpertInformation: FC<ExpertDetailsProps> = ({ expert, locale }) =>
                     Sign Up Now
                 </a>
                 <div className="wrap-btn-prise__text">
-                    {`${sessionCost}${isRus ? '₽' : '€'}`} <span>/ {`${sessionDuration}${isRus ? 'мин' : 'min'}`}</span>
+                    {`${sessionCost}€`} <span>/ {`${sessionDuration}${isRus ? 'мин' : 'min'}`}</span>
                 </div>
             </div>
         </>

src/components/Experts/Experts.tsx

@@ -18,7 +18,7 @@ export const Experts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_
     const searchData = await getTagList(locale);
     const languages = await getLanguages(locale);
     const filter = getFilter({ pageSize });
-    const experts = await getExpertsList(filter, locale);
+    const experts = await getExpertsList(locale, filter);
     const durFrom = `${searchData?.sessionCostMin || 0}${locale === 'ru' ? 'мин' : 'min'}`;
     const durTo = `${searchData?.sessionDurationMax || 0}${locale === 'ru' ? 'мин' : 'min'}`;
     const priceFrom = `${searchData?.sessionCostMin || 0}€`;

src/components/Experts/ExpertsList.tsx

@@ -8,7 +8,7 @@ import isEqual from 'lodash/isEqual';
 import Image from 'next/image';
 import { Link, useRouter } from '../../navigation';
 import { ExpertsData, Filter, GeneralFilter } from '../../types/experts';
-import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter';
+import { getObjectByFilter, getObjectByAdditionalFilter, getSearchParamsString } from '../../utils/filter';
 import { getDuration, getPrice } from '../../utils/expert';
 import { getExpertsList } from '../../actions/experts';
 import { CustomPagination } from '../view/CustomPagination';
@@ -44,7 +44,7 @@ export const ExpertsList = ({
 
         if (!isEqual(baseFilter, filter)) {
             setLoading(true);
-            getExpertsList(filter, locale)
+            getExpertsList(locale, filter)
                 .then((experts) => {
                     setExperts(experts);
                 })
@@ -70,10 +70,9 @@ export const ExpertsList = ({
             delete newFilter.page;
         }
 
-        router.push({
+        const search = getSearchParamsString(newFilter);
-            pathname: basePath as any,
+
-            query: newFilter
+        router.push(search ? `${basePath}?${search}#filter` : `${basePath}#filter`);
-        });
     };
 
     const currentPage = searchParams.has('page') ? Number(searchParams.get('page')) : baseFilter.page;

src/styles/_default.scss

@@ -320,8 +320,8 @@ a {
     margin-bottom: 16px;
   }
 
-  .ant-collapse-ghost >.ant-collapse-item, .ant-collapse-item {
+  .ant-collapse-ghost >.ant-collapse-item, .ant-collapse-item, .ant-collapse-item:last-child {
-    border-bottom: 1px solid #C4DFE6;
+    border-bottom: 1px solid #C4DFE6 !important;
     border-radius: 0 !important;
   }
 

src/styles/sessions/_details.scss

@@ -33,6 +33,14 @@
     justify-content: flex-start;
   }
 
+  &__back {
+    color: #6FB98F !important;
+    padding: 0 !important;
+    @include rem(18);
+    font-weight: 600;
+    line-height: 120%;
+  }
+
   &__comments {
     display: flex;
     flex-direction: column;
@@ -60,6 +68,136 @@
       font-weight: 500;
       line-height: 133.333%;
     }
+
+    &_add {
+      color: #FF8A00 !important;
+      padding: 0 !important;
+      @include rem(15);
+      font-weight: 400;
+      line-height: 160%;
+    }
+  }
+
+  &__name {
+    color: #003B46;
+    @include rem(18);
+    font-weight: 600;
+    line-height: 150%;
+  }
+
+  &__info {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  &__subtitle {
+    color: #003B46;
+    @include rem(15);
+    font-weight: 600;
+    line-height: 133.333%;
+  }
+
+  &__cost {
+    color: #6FB98F;
+    @include rem(15);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+
+    span {
+      color: #B7B7B7;
+    }
+  }
+
+  &__date {
+    color: #66A5AD;
+    @include rem(12);
+    font-style: normal;
+    font-weight: 300;
+    line-height: 116.667%;
+
+    &.chosen {
+      color: #D93E5C;
+    }
+
+    &.history {
+      color: #C4C4C4 !important;
+    }
+  }
+
+  &__desc {
+    color: #66A5AD;
+    @include rem(13);
+    font-style: normal;
+    font-weight: 500;
+    line-height: 123.077%;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &__more {
+    text-decoration: none;
+    color: #FF8A00 !important;
+    @include rem(15);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__apply {
+    user-select: none;
+    outline: none !important;
+    border: none !important;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 8px !important;
+    background: #FFBD00 !important;
+    box-shadow: none !important;
+    display: flex;
+    height: 54px !important;
+    padding: 15px 24px;
+    justify-content: center;
+    align-items: center;
+    color: #003B46 !important;
+    @include rem(15);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+
+    &:hover, &:active {
+      color: #003B46 !important;
+    }
+  }
+
+  &__decline {
+    user-select: none;
+    outline: none !important;
+    border: none !important;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 8px !important;
+    background: #D93E5C !important;
+    box-shadow: none !important;
+    display: flex;
+    height: 54px !important;
+    padding: 15px 24px;
+    justify-content: center;
+    align-items: center;
+    color: #fff !important;
+    @include rem(15);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+
+    &:hover, &:active {
+      color: #fff !important;
+    }
   }
 
   &__header {

src/types/sessions.ts

@@ -1,6 +1,6 @@
 import { Language } from './tags';
 
-type PublicUser = {
+export type PublicUser = {
     id: number;
     login?: string;
     name?: string;