222 lines
16 KiB
TypeScript
222 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import React, { FC, useState, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import { Tag, Image as AntdImage, Space, Button } from 'antd';
|
|
import { ZoomInOutlined, ZoomOutOutlined, StarFilled } from '@ant-design/icons';
|
|
import { SignupSessionData } from '../../types/experts';
|
|
import { ExpertDetails, Practice, ThemeGroup } from '../../types/experts';
|
|
import { ExpertDocument } from '../../types/file';
|
|
import { Locale } from '../../types/locale';
|
|
import { CustomRate } from '../view/CustomRate';
|
|
import { i18nText } from '../../i18nKeys';
|
|
import { FilledYellowButton } from '../view/FilledButton';
|
|
import { getStorageValue } from '../../hooks/useLocalStorage';
|
|
import { AUTH_TOKEN_KEY, SESSION_DATA } from '../../constants/common';
|
|
import { ScheduleModal } from '../Modals/ScheduleModal';
|
|
import { ScheduleModalResult } from '../Modals/ScheduleModalResult';
|
|
import SignalrConnection from '../../lib/signalr-connection';
|
|
import { useRouter } from '../../navigation';
|
|
import { useLocalStorage } from '../../hooks/useLocalStorage';
|
|
|
|
type ExpertDetailsProps = {
|
|
expert: ExpertDetails;
|
|
locale?: string;
|
|
expertId?: string;
|
|
};
|
|
|
|
type ExpertPracticeProps = {
|
|
cases?: Practice[];
|
|
themes?: ThemeGroup[];
|
|
locale?: string;
|
|
};
|
|
|
|
export const ExpertCard: FC<ExpertDetailsProps> = ({ expert, locale, expertId }) => {
|
|
const { publicCoachDetails } = expert || {};
|
|
const [showSchedulerModal, setShowSchedulerModal] = useState<boolean>(false);
|
|
const [mode, setMode] = useState<'data' | 'time' | 'pay' | 'finish'>('data');
|
|
const isRus = locale === Locale.ru;
|
|
const { publicCoachDetails: { tags = [], sessionCost = 0, sessionDuration = 0, coachLanguages = [] , id, botUserId} } = expert || {};
|
|
const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
|
|
const { joinChatPerson, closeConnection } = SignalrConnection();
|
|
const router = useRouter();
|
|
|
|
|
|
useEffect(() => {
|
|
document?.addEventListener('show_pay_form', handleShowPayForm);
|
|
|
|
return () => {
|
|
closeConnection();
|
|
document?.removeEventListener('show_pay_form', handleShowPayForm);
|
|
}
|
|
}, []);
|
|
|
|
const handleJoinChat = (id: number) => {
|
|
joinChatPerson(id).then((res: any) => {
|
|
router.push(`/account/messages/${res.id}` as string);
|
|
})
|
|
}
|
|
|
|
const checkSession = (data?: SignupSessionData) => {
|
|
if (data?.startAtUtc && data?.tagId) {
|
|
const jwt = getStorageValue(AUTH_TOKEN_KEY, '');
|
|
sessionStorage?.setItem(SESSION_DATA, JSON.stringify(data));
|
|
if (jwt) {
|
|
setMode('pay');
|
|
} else {
|
|
setShowSchedulerModal(false);
|
|
const showAuth = new Event('show_auth_enter');
|
|
document?.dispatchEvent(showAuth);
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleShowPayForm = () => {
|
|
setShowSchedulerModal(true);
|
|
setMode('pay');
|
|
}
|
|
|
|
const onSchedulerHandle = () => {
|
|
setMode('data');
|
|
setShowSchedulerModal(true);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="expert-card">
|
|
<div className="expert-card__wrap">
|
|
<div className="expert-card__avatar">
|
|
<Image src={publicCoachDetails?.faceImageUrl || '/images/person.png'} width={216} height={216} alt="" />
|
|
</div>
|
|
<div className="expert-card__inner">
|
|
<h1 className="expert-card__title">{`${publicCoachDetails?.name} ${publicCoachDetails?.surname || ''}`}</h1>
|
|
<div className="expert-card__info">
|
|
<span>{`${publicCoachDetails?.practiceHours} ${i18nText('practiceHours', locale)}`}</span>
|
|
<i>|</i>
|
|
<span>{`${publicCoachDetails?.supervisionPerYearId} ${i18nText('supervisionCount', locale)}`}</span>
|
|
</div>
|
|
<div className="expert-card__rating">
|
|
<CustomRate defaultValue={4} character={<StarFilled style={{ fontSize: 32 }} />} disabled />
|
|
<span>{`4/5 (${i18nText('outOf', locale)} 345)`}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{jwt && (
|
|
<div className="expert-card__wrap-btn">
|
|
<Button className="btn-apply" onClick={() => handleJoinChat(id)}>
|
|
{i18nText('chat.join', locale)}
|
|
</Button>
|
|
{botUserId && (
|
|
<Button className="btn-apply" onClick={() => handleJoinChat(botUserId)}>
|
|
{i18nText('chat.joinAI', locale)}
|
|
</Button>
|
|
)}
|
|
{/*
|
|
<a href="#" className="btn-video">
|
|
<img src="/images/videocam-outline.svg" className="" alt=""/>
|
|
Video
|
|
</a>
|
|
*/}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="expert-info">
|
|
{/* <h2 className="title-h2">{}</h2> */}
|
|
<div className="skills__list">
|
|
{coachLanguages?.map((lang) => <Tag key={lang} className="skills__list__item">{lang}</Tag>)}
|
|
</div>
|
|
</div>
|
|
{/* <p className="base-text">
|
|
Hello, my name is Marcelo. I am a Senior UX Designer with more than 6 years of experience working
|
|
with the largest companies in the world such as Disney, Globant and currently IBM.
|
|
During my career, I have helped organizations solve complex problems using aesthetically pleasing
|
|
designs with design while building teams and mentoring other designers.
|
|
I can help you: <br />
|
|
Prepare for interviews, prepare your resume or CV and work on your LinkedIn profile <br />
|
|
Get ready for whiteboard challenges and take-home exercises <br />
|
|
Create a great portfolio and case study presentation. <br />
|
|
Provide industry information. <br />
|
|
Professional orientation <br />
|
|
Strategic thinking <br /><br />
|
|
|
|
Oh, and I also speak Spanish!
|
|
</p> */}
|
|
<div className="skills__list">
|
|
{tags?.map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
|
|
</div>
|
|
<div className="wrap-btn-prise">
|
|
<FilledYellowButton onClick={onSchedulerHandle}>{i18nText('signUp', locale)}</FilledYellowButton>
|
|
<div className="wrap-btn-prise__text">
|
|
{`${sessionCost}€`} <span>/ {`${sessionDuration}${isRus ? 'мин' : 'min'}`}</span>
|
|
</div>
|
|
</div>
|
|
<ScheduleModal
|
|
open={showSchedulerModal}
|
|
handleCancel={() => setShowSchedulerModal(false)}
|
|
updateMode={setMode}
|
|
mode={mode}
|
|
expertId={expertId as string}
|
|
locale={locale as string}
|
|
sessionCost={sessionCost}
|
|
checkSession={checkSession}
|
|
/>
|
|
<ScheduleModalResult locale={locale as string} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const ExpertPractice: FC<ExpertPracticeProps> = ({ themes = [], cases = [], locale }) => {
|
|
return cases?.length > 0 ? (
|
|
<div>
|
|
<h3 className="title-h3">{i18nText('successfulCase', locale)}</h3>
|
|
{cases?.map(({ id, description, themesGroupIds }) => {
|
|
const filtered = themes ? themes.filter(({ id }) => themesGroupIds?.includes(+id)) : [];
|
|
|
|
return (
|
|
<div key={id} className="case-list">
|
|
{themesGroupIds && (
|
|
<div className="skills__list">
|
|
{filtered?.map(({ id, name }) => (
|
|
<Tag key={id} className="skills__list__item">{name}</Tag>
|
|
))}
|
|
</div>
|
|
)}
|
|
{description && <p className="base-text">{description}</p>}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
) : null;
|
|
};
|
|
|
|
export const ExpertCertificate: FC<{ document: ExpertDocument }> = ({ document }) => (
|
|
<AntdImage
|
|
width={160}
|
|
src={document?.preview?.url}
|
|
placeholder={(
|
|
<AntdImage
|
|
preview={false}
|
|
src={document?.preview?.url}
|
|
width={160}
|
|
fallback="data:image/png;base64,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"
|
|
/>
|
|
)}
|
|
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
|
|
preview={{
|
|
src: document.fullSize?.url,
|
|
toolbarRender: (
|
|
_,
|
|
{
|
|
transform: { scale },
|
|
actions: { onZoomOut, onZoomIn },
|
|
},
|
|
) => (
|
|
<Space size={12} className="toolbar-wrapper">
|
|
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
|
|
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
|
|
</Space>
|
|
)
|
|
}}
|
|
/>
|
|
);
|