@hhgtech/hhg-components
Version:
Hello Health Group common components
996 lines (941 loc) • 48.9 kB
JavaScript
import React__default, { createContext, useContext, useState, useEffect, useMemo } from 'react';
import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { u as useTranslations } from './index-09d9e570.js';
import { M as MediaQueries, t as toggleNoScroll } from './utils-538169b3.js';
import { A as AuthorBadge, B as BookingBtn } from './index-daa074e7.js';
import { I as Icon } from './index-a22d54f1.js';
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import { U as UserAvatar } from './index-a6a9fbc0.js';
import { I as ImageWrap, u as useScreenSize } from './index-50aea2c8.js';
import './index-8c40504a.js';
import { C as CommonGAssets } from './index-7adf994c.js';
import { c as callApi, b as getCarePath, m as domainLocales, n as getCareHospitalUrl, o as getCareDoctorUrl, l as getCurrentBaseUrl, g as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-5e9c89a7.js';
import { B as Button } from './index-67429eb2.js';
import { T as Text } from './index-0b67696c.js';
import { theme } from './miscTheme.js';
import styled from '@emotion/styled';
import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
import { L as Loading } from './index-4144308c.js';
import { H as Heading } from './index-e348d0b2.js';
import { M as Modal } from './index-3b8592c9.js';
import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
const MainText = ({ children, className = '' }) => {
return React__default.createElement("div", { className: `${styles$2.mainTxt} ${className}` }, children);
};
const SubText = ({ children, className = '' }) => {
return React__default.createElement("div", { className: `${styles$2.subTxt} ${className}` }, children);
};
const SubTextRow = (_a) => {
var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
return (React__default.createElement("div", Object.assign({ className: `${styles$2.subTxtRow} ${className}` }, rest), children));
};
const SubDivider = ({ className = '' }) => {
return React__default.createElement("span", { className: `${styles$2.subDivider} ${className}` });
};
const Row = ({ children, className = '' }) => {
return React__default.createElement("div", { className: `${styles$2.row} ${className} row` }, children);
};
const ColLeft = ({ children, className = '' }) => {
return React__default.createElement("div", { className: `${className} col-left` }, children);
};
const ColRight = ({ children, className = '' }) => {
return React__default.createElement("div", { className: `${className} col-right` }, children);
};
var styles$1 = {"container":"sTU4T4I","info":"tCql9Je","avatarWrapper":"_3j7uYhH","avatarIcon":"PHABgoT"};
const CardAuthor$1 = ({ avatarProps, title, subTitle, children, className = '', style, onAvatarClick, avatarIcon, dataEventCategory, dataEventAction, dataEventLabel, }) => {
return (React__default.createElement("div", { className: `${styles$1.container} ${className}`, style: style },
React__default.createElement("div", { className: styles$1.avatarWrapper, onClick: onAvatarClick, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel },
React__default.createElement(UserAvatar, Object.assign({}, avatarProps)),
avatarIcon && React__default.createElement("div", { className: styles$1.avatarIcon }, avatarIcon)),
React__default.createElement("div", { className: `${styles$1.info} ${className}`, style: { minHeight: `${(avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.size) || 40}px` } }, children || (React__default.createElement(React__default.Fragment, null,
title && React__default.createElement(MainText, null, title),
subTitle && React__default.createElement(SubText, null, subTitle))))));
};
CardAuthor$1.MainText = MainText;
CardAuthor$1.SubText = SubText;
CardAuthor$1.SubDivider = SubDivider;
CardAuthor$1.Row = Row;
CardAuthor$1.ColLeft = ColLeft;
CardAuthor$1.ColRight = ColRight;
CardAuthor$1.SubTextRow = SubTextRow;
var useStyles$1 = createStyles(() => {
return {
root: {
verticalAlign: 'bottom',
},
};
});
const CardAuthorContext = createContext({});
const AuthorBadgeItem = ({ styles, className, classNames, }) => {
const { role, siteType, title } = useContext(CardAuthorContext);
const { cx, classes } = useStyles$1(undefined, {
name: 'AuthorBadgeItem',
styles,
classNames,
});
return role ? (React__default.createElement(AuthorBadge, { className: cx(classes.root, className), siteType: siteType, role: role, title: title })) : null;
};
const DisplayName = () => {
const { displayName } = useContext(CardAuthorContext);
return React__default.createElement(Box, null, displayName);
};
var useStyles = createStyles(() => {
return {
root: {},
};
});
const StyledPopup$2 = styled.div `
position: fixed;
left: 50%;
width: 343px;
background-color: ${theme.colors.white};
border-radius: ${theme.borderRadius};
box-shadow: 0px 0px 4px ${theme.colors.gray200};
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
${MediaQueries.tdUp} {
width: 750px;
}
&[data-animation='true'] {
transition: all 0.5s ease-in-out;
}
&[data-open='true'] {
z-index: 400;
top: 50%;
opacity: 1;
visibility: visible;
}
&[data-open='false'] {
top: -50%;
}
.popup-content {
${MediaQueries.mbDown} {
display: block;
}
display: flex;
position: relative;
z-index: 111;
height: 100%;
.button-see-more {
margin: 32px 0;
padding: 0;
> * {
display: inline-block;
}
}
.close-button {
position: absolute;
z-index: 100;
top: 10px;
right: 10px;
cursor: pointer;
width: unset;
height: unset;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.main-info {
padding-bottom: 32px;
background-color: ${theme.colors.primary50};
border-radius: ${theme.borderRadius};
.btn-booking {
display: flex;
margin: 12px auto;
}
.avatar-title {
position: relative;
width: 100%;
padding-top: 46px;
text-align: center;
}
}
`;
const StyledPopupWrapper$2 = styled.div `
position: fixed;
z-index: 110;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
background: rgba(38, 38, 38, 0.3);
&[data-open='false'] {
display: none;
}
`;
const StyledProfileImage$2 = styled.div `
.image-container {
.badge-avatar {
position: absolute;
right: 0;
bottom: 0;
top: 0;
}
}
display: flex;
justify-content: center;
padding-bottom: 15px;
text-align: center;
.profile-image {
width: 100px;
min-width: 100px;
height: 100px;
min-height: 100px;
border-radius: 50%;
object-fit: cover;
}
.badge-avatar {
width: 24px;
height: 24px;
}
`;
const StyledTitleContainer$2 = styled.div `
position: relative;
z-index: 9;
.specialty {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
padding: 0px 16px;
text-align: center;
.specialty {
justify-content: center;
}
.experience {
padding: 16px 0px 32px;
text-align: left;
.btn-wrapper {
margin-top: 24px;
}
}
p {
max-width: 100%;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
`;
const StyledExperienceList = styled.ul `
padding-left: 18px;
li {
list-style-type: disc;
}
`;
var img$5 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6 6 18M6 6l12 12'/%3e%3c/svg%3e";
var CloseLight = img$5;
var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3e%3cpath fill='white' stroke='%23E4E8EC' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16'/%3e%3cpath fill='%23FF5331' d='M10.333 7.667V5H7.667v2.667H5v2.667h2.667V13h2.666v-2.666H13V7.667z'/%3e%3c/svg%3e";
var ReviewerMedical = img$4;
const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId, locale, isMobile, overwriteProfileProps, avatarFallback = CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
var _a, _b, _c;
const { t } = useTranslations();
const [doctorInfo, setDoctorInfo] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (isOpen && doctorId && String(doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.id) !== String(doctorId)) {
setIsLoading(true);
try {
setDoctorInfo(null);
callApi(getCarePath(CARE_PATHS.GET_DOCTOR_INFO, {
doctorId: doctorId,
website_url: domainLocales[locale],
}), 'get').then((res) => {
setDoctorInfo(Object.assign(Object.assign({}, res === null || res === void 0 ? void 0 : res._data.doctor), overwriteProfileProps));
});
}
catch (error) {
console.error(error);
}
setIsLoading(false);
}
}, [isOpen, doctorId, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.id]);
const experiences = (doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.experiences) || [];
const specialty = (doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.specialties) || [];
const specialtiesList = specialty
.map((specialty) => (specialty === null || specialty === void 0 ? void 0 : specialty.name) || specialty)
.join(' • ');
const formattedExperiences = experiences
.map((experience) => {
try {
return JSON.parse(experience.description);
}
catch (e) {
return experience.description;
}
})
.filter((e) => e.content);
const renderExperienceText = (experience) => {
if (experience === null || experience === void 0 ? void 0 : experience.year)
return `${experience.year} ${experience === null || experience === void 0 ? void 0 : experience.content}`;
if (experience === null || experience === void 0 ? void 0 : experience.content)
return experience.content;
if (typeof experience === 'string')
return experience;
return '';
};
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(StyledPopup$2, { "data-open": isOpen, "data-animation": enableAnimation, onClick: (e) => e.stopPropagation() }, isLoading || !doctorInfo ? (React__default.createElement(Loading, null)) : (React__default.createElement("div", { className: "popup-content" },
React__default.createElement("div", { className: "close-button", onClick: onClose },
React__default.createElement("img", { src: CloseLight, style: { width: 20, height: 20 }, alt: "close-icon", loading: "lazy" })),
React__default.createElement("div", { className: "main-info" },
React__default.createElement("div", { className: "border-banner" }),
React__default.createElement("div", { className: "avatar-title" },
React__default.createElement(StyledProfileImage$2, null,
React__default.createElement("div", { className: "image-container" },
React__default.createElement("div", { style: { position: 'relative' } },
React__default.createElement(ImageWrap, { src: doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.avatar, backupSrc: avatarFallback, className: "profile-image", alt: "avatar" }),
React__default.createElement("img", { className: "badge-avatar", src: ReviewerMedical, alt: "badge", loading: "lazy" })))),
React__default.createElement(StyledTitleContainer$2, null,
React__default.createElement(Text, { size: "s3", weight: "semiBold", className: "full-name" }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.name),
React__default.createElement("div", { className: "specialty" },
specialtiesList && (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Text, { size: "p4", color: theme.colors.gray800 },
specialtiesList,
' • '))),
React__default.createElement("a", { href: getCareHospitalUrl({
id: (_a = doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization) === null || _a === void 0 ? void 0 : _a.id,
name: (_b = doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization) === null || _b === void 0 ? void 0 : _b.name,
slug: (_c = doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization) === null || _c === void 0 ? void 0 : _c.slug,
locale,
}), className: "organisation", target: "_blank", rel: "noreferrer" },
React__default.createElement(Text, { size: "p4", className: "organisation", color: theme.colors.gray800, style: { textDecoration: 'underline' } }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization.name))))),
!isMobile && (React__default.createElement("div", { className: "btn-wrapper" },
React__default.createElement("a", { href: getCareDoctorUrl({
name: doctorInfo.name,
id: doctorInfo.id,
locale: locale,
}) },
React__default.createElement(Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment')))))),
formattedExperiences && (React__default.createElement(StyledTitleContainer$2, null,
React__default.createElement("div", { className: "experience" },
React__default.createElement(Text, { weight: "bold", size: "s3", color: theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
React__default.createElement(StyledExperienceList, null, formattedExperiences.map((experience, i) => (React__default.createElement("li", { key: i },
React__default.createElement(Text, { size: "p2" }, renderExperienceText(experience)))))),
isMobile ? (React__default.createElement("div", { className: "btn-wrapper" },
React__default.createElement("a", { href: getCareDoctorUrl({
name: doctorInfo.name,
id: doctorInfo.id,
locale: locale,
}) },
React__default.createElement(Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default.createElement("a", { href: getCareDoctorUrl({
name: doctorInfo.name,
id: doctorInfo.id,
locale: locale,
}) },
React__default.createElement(Text, { size: "s4", color: "#2D87F3", style: { paddingTop: 24 }, "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": getCurrentBaseUrl(locale) +
getCareDoctorUrl({
name: doctorInfo.name,
id: doctorInfo.id,
locale: locale,
}) }, t('home.seeExpert')))))))))),
React__default.createElement(StyledPopupWrapper$2, { "data-open": isOpen, onClick: (e) => {
e.stopPropagation();
onClose();
} })));
};
const StyledPopup$1 = styled.div `
position: fixed;
left: 50%;
width: 343px;
background-color: ${theme.colors.white};
border-radius: ${theme.borderRadius};
box-shadow: 0px 0px 4px ${theme.colors.gray200};
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
${MediaQueries.tdUp} {
width: 750px;
}
&[data-animation='true'] {
transition: all 0.5s ease-in-out;
}
&[data-open='true'] {
z-index: 400;
top: 50%;
opacity: 1;
visibility: visible;
}
&[data-open='false'] {
top: -50%;
}
.popup-content {
${MediaQueries.mbDown} {
display: block;
}
display: flex;
position: relative;
z-index: 111;
height: 100%;
.button-see-more {
margin: 32px 0;
padding: 0;
> * {
display: inline-block;
}
}
.close-button {
position: absolute;
z-index: 100;
top: 10px;
right: 10px;
cursor: pointer;
width: unset;
height: unset;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.main-info {
padding-bottom: 32px;
background-color: ${theme.colors.primary50};
border-radius: ${theme.borderRadius};
.avatar-title {
position: relative;
width: 100%;
padding-top: 46px;
text-align: center;
}
}
`;
const StyledPopupWrapper$1 = styled.div `
position: fixed;
z-index: 110;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
background: rgba(38, 38, 38, 0.3);
&[data-open='false'] {
display: none;
}
`;
const StyledProfileImage$1 = styled.div `
.image-container {
.badge-avatar {
position: absolute;
right: 0;
bottom: 0;
top: 0;
}
}
display: flex;
justify-content: center;
padding-bottom: 15px;
text-align: center;
.profile-image {
width: 100px;
min-width: 100px;
height: 100px;
min-height: 100px;
border-radius: 50%;
object-fit: cover;
}
.badge-avatar {
width: 24px;
height: 24px;
}
`;
const StyledTitleContainer$1 = styled.div `
position: relative;
z-index: 9;
.specialty {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
padding: 0px 16px;
text-align: center;
.specialty {
justify-content: center;
}
.experience {
padding: 16px 0px 32px;
text-align: left;
.btn-wrapper {
margin-top: 24px;
}
}
p {
max-width: 100%;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
`;
const StyledItem = styled.div `
display: flex;
margin-top: 8px;
.bullet-point {
width: 24px;
height: 24px;
}
`;
var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3ccircle cx='12' cy='12' r='2' fill='%232D87F3'/%3e%3c/svg%3e";
var BulletPoint = img$3;
var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath fill='%2345A4FF' d='M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12'/%3e%3cpath fill='%232D87F3' d='M24 12a12 12 0 0 0-.128-1.758l-5.077-5.077L5.041 18.958l4.858 4.858c.682.12 1.384.184 2.1.184 6.628 0 12-5.373 12-12Z'/%3e%3cpath fill='white' d='M9.014 17.824 5.04 18.959l1.135-3.973 2.368.47z'/%3e%3cpath fill='%23F7F9FC' d='M8.544 15.456 5.041 18.96l3.972-1.135z'/%3e%3cpath fill='%23E4E8EC' d='M6.467 18.552 5.45 17.533l-.41 1.427 1.426-.407Z'/%3e%3cpath fill='%23D2D6DC' d='m5.957 18.043-.916.916 1.426-.407z'/%3e%3cpath fill='%23FFD658' d='m15.828 5.331 2.837 2.837-9.651 9.652-2.838-2.837z'/%3e%3cpath fill='%23FFC326' d='m7.594 16.404 9.651-9.651 1.419 1.418-9.652 9.652z'/%3e%3cpath fill='%23FF5331' d='m18.312 8.525-2.837-2.838 1.123-1.123c.44-.44 1.154-.44 1.595 0l1.243 1.243c.44.44.44 1.154 0 1.594z'/%3e%3cpath fill='%23F44D2C' d='m18.816 5.186-1.921 1.92 1.418 1.419 1.124-1.124c.44-.44.44-1.154 0-1.594l-.622-.621Z'/%3e%3c/svg%3e";
var ReviewerAuthor = img$2;
var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3ccircle cx='12' cy='12' r='12' fill='%23FFCB37'/%3e%3ccircle cx='12' cy='12' r='10.5' fill='%23FE921D'/%3e%3cpath fill='white' d='M11.443 5.137a.6.6 0 0 1 1.114 0l1.436 3.577a.6.6 0 0 0 .516.375l3.846.26a.6.6 0 0 1 .344 1.06l-2.958 2.471a.6.6 0 0 0-.197.607l.94 3.738a.6.6 0 0 1-.9.655l-3.265-2.05a.6.6 0 0 0-.638 0l-3.265 2.05a.6.6 0 0 1-.9-.655l.94-3.738a.6.6 0 0 0-.198-.607L5.3 10.41a.6.6 0 0 1 .344-1.06l3.846-.26a.6.6 0 0 0 .517-.375z'/%3e%3c/svg%3e";
var ReviewerExpert = img$1;
var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath fill='%2300C076' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m11.946 5.466-5.28 4.8-2.4-2.182'/%3e%3c/svg%3e";
var ReviewerFactCheck = img;
const ReviewerIconMap = {
author: ReviewerAuthor,
edtior: ReviewerAuthor,
expert: ReviewerExpert,
'fact-check': ReviewerFactCheck,
medical: ReviewerMedical,
};
const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onClose, enableAnimation = true, expertId, overwriteProfileProps, avatarFallback = CommonGAssets.getAssetPath('avatar.jpg'), }) => {
const { t } = useTranslations();
const [expertInfo, setExpertInfo] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (isOpen &&
expertId &&
String(expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.user_id) !== String(expertId)) {
setIsLoading(true);
try {
setExpertInfo(null);
callApi(getDiscoverApiPath(DISCOVER_PATHS.GET_EXPERT_BY_ID, {
id: expertId,
}), 'get').then((res) => {
setExpertInfo(Object.assign(Object.assign({}, res === null || res === void 0 ? void 0 : res.data), overwriteProfileProps));
});
}
catch (error) {
console.error(error);
}
setIsLoading(false);
}
}, [isOpen, expertId, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.user_id]);
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(StyledPopup$1, { "data-open": isOpen, "data-animation": enableAnimation, onClick: (e) => e.stopPropagation() }, isLoading || !expertInfo ? (React__default.createElement(Loading, null)) : (React__default.createElement("div", { className: "popup-content" },
React__default.createElement("div", { className: "close-button", onClick: onClose },
React__default.createElement("img", { src: CloseLight, style: { width: 20, height: 20 }, alt: "close-icon", loading: "lazy" })),
React__default.createElement("div", { className: "main-info" },
React__default.createElement("div", { className: "border-banner" }),
React__default.createElement("div", { className: "avatar-title" },
React__default.createElement(StyledProfileImage$1, null,
React__default.createElement("div", { className: "image-container" },
React__default.createElement("div", { style: { position: 'relative' } },
React__default.createElement(ImageWrap, { src: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.avatar, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
React__default.createElement("img", { className: "badge-avatar", src: ReviewerIconMap[expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.role], alt: "badge", loading: "lazy" })))),
React__default.createElement(StyledTitleContainer$1, null,
React__default.createElement(Text, { size: "s3", className: "full-name", weight: "semiBold" }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.display_name),
React__default.createElement("div", null,
React__default.createElement(Text, { size: "p4", color: theme.colors.gray800 }, expertInfo === null || expertInfo === void 0 ? void 0 :
expertInfo.specialty,
' • '),
React__default.createElement("a", { href: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation_url, className: "organisation", target: "_blank", rel: "noreferrer" },
React__default.createElement(Text, { size: "p4", className: "organisation", color: theme.colors.gray800, style: { textDecoration: 'underline' } }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation)))))),
React__default.createElement(StyledTitleContainer$1, null,
React__default.createElement("div", { className: "experience" },
React__default.createElement(Text, { weight: "bold", size: "p4", color: theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
React__default.createElement("div", { className: "list-items" }, (expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.experiences)
? expertInfo.experiences
.filter((e) => !!(e && (e.title || e.organization)))
.slice(0, 3)
.map((experience, index) => (React__default.createElement(StyledItem, { key: index },
React__default.createElement("img", { className: "bullet-point", src: BulletPoint, alt: "point", loading: "lazy" }),
React__default.createElement("div", { className: "text-contain" },
React__default.createElement(Heading, { tag: "h6", color: theme.colors.gray800 }, experience === null || experience === void 0 ? void 0 : experience.title),
React__default.createElement(Text, { size: "p2", color: theme.colors.gray500 }, experience === null || experience === void 0 ? void 0 : experience.organization)))))
: false),
React__default.createElement("a", { href: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url, style: { display: 'inline-block', paddingTop: 24 } },
React__default.createElement(Text, { as: "span", size: "s4", color: "#2D87F3", "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": getCurrentBaseUrl(locale) + (expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url) }, t('home.seeExpert')))))))),
React__default.createElement(StyledPopupWrapper$1, { "data-open": isOpen, onClick: (e) => {
e.stopPropagation();
onClose();
} })));
};
const StyledPopup = styled.div `
position: fixed;
left: 50%;
width: 343px;
background-color: ${theme.colors.white};
border-radius: ${theme.borderRadius};
box-shadow: 0px 0px 4px ${theme.colors.gray200};
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
${MediaQueries.tdUp} {
width: 750px;
}
&[data-animation='true'] {
transition: all 0.5s ease-in-out;
}
&[data-open='true'] {
z-index: 400;
top: 50%;
opacity: 1;
visibility: visible;
}
&[data-open='false'] {
top: -50%;
}
.popup-content {
${MediaQueries.mbDown} {
display: block;
}
display: flex;
position: relative;
z-index: 111;
height: 100%;
.button-see-more {
margin: 32px 0;
padding: 0;
> * {
display: inline-block;
}
}
.close-button {
position: absolute;
z-index: 100;
top: 10px;
right: 10px;
cursor: pointer;
width: unset;
height: unset;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.main-info {
padding-bottom: 32px;
background-color: ${theme.colors.primary50};
border-radius: ${theme.borderRadius};
.btn-booking {
display: flex;
margin: 12px auto;
}
.avatar-title {
position: relative;
width: 100%;
padding-top: 46px;
text-align: center;
}
}
`;
const StyledPopupWrapper = styled.div `
position: fixed;
z-index: 110;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
background: rgba(38, 38, 38, 0.3);
&[data-open='false'] {
display: none;
}
`;
const StyledProfileImage = styled.div `
.image-container {
.badge-avatar {
position: absolute;
right: 0;
bottom: 0;
top: 0;
}
}
display: flex;
justify-content: center;
padding-bottom: 15px;
text-align: center;
.profile-image {
width: 100px;
min-width: 100px;
height: 100px;
min-height: 100px;
border-radius: 50%;
object-fit: cover;
}
.badge-avatar {
width: 24px;
height: 24px;
}
`;
const StyledTitleContainer = styled.div `
position: relative;
z-index: 9;
.specialty {
display: block;
min-width: 240px;
}
padding: 0px 16px;
text-align: center;
.specialty {
justify-content: center;
}
.experience {
padding: 16px 0px 32px;
text-align: left;
.btn-wrapper {
margin-top: 24px;
}
}
p {
max-width: 100%;
}
`;
const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospitalId, locale, isMobile, overwriteProfileProps, avatarFallback = CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
const { t } = useTranslations();
const [hospitalInfo, setHospitalInfo] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (isOpen &&
hospitalId &&
String(hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.id) !== String(hospitalId)) {
setIsLoading(true);
try {
setHospitalInfo(null);
callApi(getCarePath(CARE_PATHS.GET_HOSPITAL_INFO, {
hospital_branch_id: hospitalId,
website_url: domainLocales[locale],
}), 'get').then((res) => {
setHospitalInfo(Object.assign(Object.assign({}, res === null || res === void 0 ? void 0 : res._data.branch), overwriteProfileProps));
});
}
catch (error) {
console.error(error);
}
setIsLoading(false);
}
}, [isOpen, hospitalId, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.id]);
const specialties = (hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.specialties) || [];
const formatSpecialties = useMemo(() => specialties.map((specialty) => specialty.name), [specialties]);
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(StyledPopup, { "data-open": isOpen, "data-animation": enableAnimation, onClick: (e) => e.stopPropagation() }, isLoading || !hospitalInfo ? (React__default.createElement(Loading, null)) : (React__default.createElement("div", { className: "popup-content" },
React__default.createElement("div", { className: "close-button", onClick: onClose },
React__default.createElement("img", { src: CloseLight, style: { width: 20, height: 20 }, alt: "close-icon", loading: "lazy" })),
React__default.createElement("div", { className: "main-info" },
React__default.createElement("div", { className: "border-banner" }),
React__default.createElement("div", { className: "avatar-title" },
React__default.createElement(StyledProfileImage, null,
React__default.createElement("div", { className: "image-container" },
React__default.createElement("div", { style: { position: 'relative' } },
React__default.createElement(ImageWrap, { src: hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.logo, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
React__default.createElement("img", { className: "badge-avatar", src: ReviewerMedical, alt: "badge", loading: "lazy" })))),
React__default.createElement(StyledTitleContainer, null,
React__default.createElement(Text, { size: "s3", weight: "semiBold", className: "full-name" }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name),
React__default.createElement("div", { className: "specialty" },
specialties && (React__default.createElement(Text, { size: "p4", color: theme.colors.gray800 },
formatSpecialties.join(' • '),
'•')),
React__default.createElement("a", { href: getCareHospitalUrl({
id: hospitalInfo.id,
name: hospitalInfo.name,
slug: hospitalInfo.slug,
locale,
}), className: "organisation", target: "_blank", rel: "noreferrer" },
React__default.createElement(Text, { size: "p4", className: "organisation", color: theme.colors.gray800, style: { textDecoration: 'underline' } }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name))))),
!isMobile && (React__default.createElement("a", { href: getCareHospitalUrl({
id: hospitalInfo.id,
name: hospitalInfo.name,
slug: hospitalInfo.slug,
locale,
}) },
React__default.createElement("div", { className: "btn-wrapper" },
React__default.createElement(Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment')))))),
React__default.createElement(StyledTitleContainer, null,
React__default.createElement("div", { className: "experience" },
React__default.createElement(Text, { weight: "bold", size: "s3", color: theme.colors.gray800, style: { paddingBottom: 16 } }, t('hospital.content.description').toUpperCase()),
React__default.createElement(Text, { size: "p2", color: theme.colors.gray500 }, hospitalInfo.about),
isMobile ? (React__default.createElement("a", { href: getCareHospitalUrl({
id: hospitalInfo.id,
name: hospitalInfo.name,
slug: hospitalInfo.slug,
locale,
}) },
React__default.createElement("div", { className: "btn-wrapper" },
React__default.createElement(Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default.createElement("a", { href: getCareHospitalUrl({
id: hospitalInfo.id,
name: hospitalInfo.name,
slug: hospitalInfo.slug,
locale,
}) },
React__default.createElement(Text, { size: "s4", color: "#2D87F3", as: "span", "data-event-category": trackingCategory, "data-event-action": "See Full Hospital Profile", "data-event-label": getCurrentBaseUrl(locale) +
getCareHospitalUrl({
id: hospitalInfo.id,
name: hospitalInfo.name,
slug: hospitalInfo.slug,
locale,
}) }, t('home.seeHospital'))))))))),
React__default.createElement(StyledPopupWrapper, { "data-open": isOpen, onClick: (e) => {
e.stopPropagation();
onClose();
} })));
};
var styles = {"modal":"_2UKyiK1","header":"E5ga-tI","heading":"_8Y2nWXX","close":"d0T7kSP"};
const ProfileDetailModal = ({ open, onClose, children, profileModalProps, }) => {
const { t } = useTranslations();
return (React__default.createElement(Modal, Object.assign({ title: t('profilePanel.modal.heading'), titleProps: true, className: styles.modal, opened: open, onClose: onClose, overlayOpacity: 0.2, overflow: "inside", transitionProps: {
transition: 'slide-left',
}, styles: {
header: {
borderBottom: 0,
},
inner: {
padding: 0,
justifyContent: 'flex-end',
},
modal: {
height: '100%',
borderRadius: 0,
},
body: {
maxHeight: '100%',
},
content: {
maxHeight: '100%',
height: '100%',
borderRadius: 0,
},
} }, profileModalProps), children));
};
dayjs.extend(relativeTime);
const _CardAuthor = (props) => {
const { className = '', community, name, username, url, avatar: avatarProp, role: roleProp, title, userType = 'user', expertId, specialty, organisation, isMarryBaby: isMarryBabyProp, doctorId, hospitalId, hasQuickBooking, handleMakeAppointment, communityTrackingAttr, isAnonymous, showDetailPopup, showChatbotButton = false, subLine, authActionWrapper, profileProps, profileModalProps, extendEle, avatarProps, hideInfo, timeText, onCloseFromPost, onChatWithBot, avatarIcon, badgeIconSize, hideBackground, children, styles, dataEventCategory, dataEventAction, dataEventLabel, } = props;
const { data: { locale, router, env: { isMarryBaby: isMarryBabyContext, togetherBasePath }, }, } = useContext(TogetherComponentGlobalContext);
const { isMobile } = useScreenSize();
const { t } = useTranslations();
const { classes } = useStyles(undefined,
// Second argument is responsible for styles api integration
{ name: 'CardAuthor', styles });
const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
const displayName = isAnonymous
? t('cardPost.anonymous')
: name || username || '';
const avatar = isAnonymous
? CommonGAssets.getAssetPath('avatar.jpg')
: avatarProp;
const role = isAnonymous ? undefined : roleProp;
const [openPopupExpert, setOpenPopupExpert] = useState(false);
const { asPath } = router || {};
const currentUrl = `https://${domainLocales$1[locale]}${asPath}`;
const onAuthorClick = () => {
if (isAnonymous) {
return false;
}
if (showDetailPopup) {
setOpen(true);
}
else if (url) {
window.location.href = url;
}
};
useEffect(() => {
toggleNoScroll(openPopupExpert);
}, [openPopupExpert]);
const [open, setOpen] = useState(false);
const isExpert = (props === null || props === void 0 ? void 0 : props.role) === 'expert';
const bookingAvai = Boolean(doctorId || hospitalId);
const subItemList = [
role === 'expert' && organisation && React__default.createElement("span", null, organisation),
role === 'expert' && specialty && React__default.createElement("span", null, specialty),
!(role === 'expert' && specialty && organisation) && (community === null || community === void 0 ? void 0 : community.name) && (React__default.createElement("a", Object.assign({ href: (community === null || community === void 0 ? void 0 : community.slug) && community.isActive && !community.isHidden
? `${togetherBasePath}/${community === null || community === void 0 ? void 0 : community.slug}/`
: undefined, className: "author-community-name" }, communityTrackingAttr), `${community === null || community === void 0 ? void 0 : community.name}`)),
timeText && React__default.createElement("span", null, timeText),
].filter(Boolean);
const [ProfileDetail, setProfileDetail] = useState(null);
useEffect(() => {
if (open && !ProfileDetail) {
if (userType === 'chatbot') {
import('./index-02dedee9.js').then((module) => {
setProfileDetail(() => module.ProfileChatbot);
});
}
else {
import('./togetherMoleculesProfileDetail.js').then((module) => {
setProfileDetail(() => module.ProfileDetail);
});
}
}
}, [open, userType]);
return (React__default.createElement(CardAuthorContext.Provider, { value: {
displayName,
title,
role,
siteType,
handleMakeAppointment,
doctorId,
hospitalId,
currentUrl,
} },
React__default.createElement(ProfileDetailModal, { open: open, onClose: () => setOpen(false), profileModalProps: profileModalProps }, ProfileDetail && (React__default.createElement(ProfileDetail, Object.assign({ currentPageUrl: dataEventLabel, authActionWrapper: authActionWrapper, onCloseFromPost: () => {
setOpen(false);
onCloseFromPost === null || onCloseFromPost === void 0 ? void 0 : onCloseFromPost();
}, onChatWithBot: onChatWithBot }, profileProps, { authorProps: Object.assign({ userId: props === null || props === void 0 ? void 0 : props.userId, avatar, name: props === null || props === void 0 ? void 0 : props.name, role: props === null || props === void 0 ? void 0 : props.role, title: props === null || props === void 0 ? void 0 : props.title, doctorId,
hospitalId,
hasQuickBooking, userType: userType }, profileProps === null || profileProps === void 0 ? void 0 : profileProps.authorProps) })))),
role === 'expert' && expertId ? (React__default.createElement(PopupExpert, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), expertId: expertId })) : null,
role === 'expert' && doctorId ? (React__default.createElement(PopupDoctor, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), doctorId: doctorId, locale: locale })) : null,
role === 'expert' && hospitalId ? (React__default.createElement(PopupHospital, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), hospitalId: hospitalId, locale: locale })) : null,
React__default.createElement("div", { className: `hhg-card-author ${classes.root} ${className} ${isExpert ? 'expert-author' : ''}`, "data-background": !hideBackground && isExpert, "data-is-marrybaby": isMarryBaby },
React__default.createElement(CardAuthor$1, { dataEventCategory: dataEventCategory, dataEventAction: dataEventAction, dataEventLabel: dataEventLabel, onAvatarClick: onAuthorClick, avatarProps: Object.assign(Object.assign({ avatar: isAnonymous
? CommonGAssets.getAssetPath(isMarryBaby ? 'anomyous-avatar-1.svg' : 'anomyous-avatar.svg')
: avatar, username: displayName }, avatarProps), { style: {
cursor: !isAnonymous && (url || showDetailPopup)
? 'pointer'
: 'default',
} }), avatarIcon: avatarIcon || (isExpert && React__default.createElement(CrossLogo, { size: badgeIconSize || 15 })) }, children ? (React__default.createElement("div", { onClick: onAuthorClick }, children)) : (!hideInfo && (React__default.createElement(CardAuthor$1.Row, null,
React__default.createElement(CardAuthor$1.ColLeft, null,
React__default.createElement(Flex, { align: 'center', onClick: onAuthorClick },
React__default.createElement(CardAuthor$1.MainText, { onClick: onAuthorClick },
displayName,
userType === 'chatbot' ? (React__default.createElement(React__default.Fragment, null,
' ',
React__default.createElement(ShieldCheck, { color: theme.colors.primaryBase, size: 16, style: {
display: 'inline-block',
transform: 'translate(0, 2px)',
} }),
showChatbotButton && (React__default.createElement("div", { style: { marginTop: '8px' } },
React__default.createElement(Button$1, { color: "primary", size: "xs", variant: "filled", type: "button", leftIcon: React__default.createElement(Icon.App, { size: 16 }), onClick: () => {
onChatWithBot === null || onChatWithBot === void 0 ? void 0 : onChatWithBot();
} }, t('chatbot.with.me')))))) : (React__default.createElement(AuthorBadgeItem, null)))),
subLine || (React__default.createElement(CardAuthor$1.SubTextRow, { style: hasQuickBooking
? {
position: 'relative',
}
: {} },
subItemList.map((i, idx) => (React__default.createElement(React__default.Fragment, null,
idx !== 0 && React__default.createElement(CardAuthor$1.SubDivider, null),
React__default.createElement(CardAuthor$1.SubText, null, i)))),
hasQuickBooking && bookingAvai && (React__default.createElement(Box, { sx: {
marginTop: rem(5),
// position: 'absolute',
// bottom: `${-bookingBtnSize}px`,
// left: 0,
} },
React__default.createElement(BookingBtn, { bookingId: doctorId || hospitalId, bookingType: doctorId
? 'doctor'
: hospitalId
? 'hospital'
: undefined, size: isMobile ? 'xs' : 'sm' })))))))))),
extendEle && extendEle)));
};
const CardAuthor = _CardAuthor;
CardAuthor.MainText = CardAuthor$1.MainText;
CardAuthor.SubText = CardAuthor$1.SubText;
CardAuthor.SubTextRow = CardAuthor$1.SubTextRow;
CardAuthor.SubDivider = CardAuthor$1.SubDivider;
CardAuthor.AuthorBadge = AuthorBadgeItem;
CardAuthor.DisplayName = DisplayName;
export { CardAuthor as C, PopupExpert as P, PopupDoctor as a, PopupHospital as b, ProfileDetailModal as c, CardAuthor$1 as d };