82 lines
3.8 KiB
TypeScript
82 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import {useState} from "react";
|
|
import {Tag} from "antd";
|
|
import {EditOutlined} from "@ant-design/icons";
|
|
import {LinkButton} from "../../view/LinkButton";
|
|
import {ExpertData, ProfileData} from "../../../types/profile";
|
|
import {i18nText} from "../../../i18nKeys/index";
|
|
import {PracticeDTO} from "../../../types/practice";
|
|
import {ExpertPractice} from "../../Experts/ExpertDetails";
|
|
import {EditExpertAboutModal} from "../../Modals/EditExpertAboutModal";
|
|
|
|
type ExpertAboutProps = {
|
|
locale: string;
|
|
practice?: PracticeDTO;
|
|
person?: ProfileData;
|
|
updateExpert: (key: keyof ExpertData) => void;
|
|
};
|
|
|
|
export const ExpertAbout = ({ locale, updateExpert, practice, person }: ExpertAboutProps) => {
|
|
const [showEdit, setShowEdit] = useState<boolean>(false);
|
|
|
|
const supervisionCount = practice?.person4Data?.supervisionPerYears && practice?.person4Data?.supervisionPerYearId
|
|
? practice.person4Data.supervisionPerYears.filter(({ id }) => id === practice.person4Data.supervisionPerYearId)
|
|
: [];
|
|
|
|
return (
|
|
<div className="coaching-section__wrap">
|
|
<div className="coaching-section">
|
|
<div className="coaching-section__title">
|
|
<h2 className="title-h2">{i18nText('aboutCoach', locale)}</h2>
|
|
<LinkButton
|
|
type="link"
|
|
icon={<EditOutlined />}
|
|
onClick={() => setShowEdit(true)}
|
|
/>
|
|
</div>
|
|
<div className="coaching-section__info">
|
|
<div className="coaching-section__practice">
|
|
{`${practice?.person4Data?.practiceHours || 0} ${i18nText('practiceHours', locale)} | ${supervisionCount.length > 0 ? supervisionCount[0].name : 0} ${i18nText('supervisionCount', locale)}`}
|
|
</div>
|
|
<div className="coaching-section__list">
|
|
{practice?.person4Data?.sessionCost && (
|
|
<div className="coaching-section__item">
|
|
<div>{i18nText('price', locale)}</div>
|
|
<div>{`${practice?.person4Data?.sessionCost} €`}</div>
|
|
</div>
|
|
)}
|
|
{practice?.person4Data?.sessionDuration && (
|
|
<div className="coaching-section__item">
|
|
<div>{i18nText('duration', locale)}</div>
|
|
<div>{`${practice?.person4Data?.sessionDuration} ${locale === 'ru' ? 'мин' : 'min'}`}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="coaching-section__lang">
|
|
<div>{i18nText('sessionLang', locale)}</div>
|
|
<div className="skills__list">
|
|
{person?.languagesLinks && person.languagesLinks?.length > 0 && person.languagesLinks
|
|
.map(({ language: { code, nativeSpelling } }) => <Tag key={code} className="skills__list__item">{nativeSpelling}</Tag>)}
|
|
</div>
|
|
</div>
|
|
<ExpertPractice
|
|
locale={locale}
|
|
themes={practice?.person4Data?.themesGroups}
|
|
cases={practice?.person4Data?.practiceCases}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<EditExpertAboutModal
|
|
locale={locale}
|
|
open={showEdit}
|
|
practice={practice}
|
|
person={person}
|
|
handleCancel={() => setShowEdit(false)}
|
|
refreshPractice={() => updateExpert('practice')}
|
|
refreshPerson={() => updateExpert('person')}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|