@hhgtech/hhg-components 1.29.87 → 1.29.89

package/build/esm/index-7ad9db02.js

@@ -0,0 +1,1030 @@
+import React__default, { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
+import { createStyles, Box, Flex, rem } from '@mantine/core';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { u as useTranslations } from './useTranslations-b66d9f2b.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-8a1f05c9.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-52d04cc5.js';
+import { _ as __rest } from './tslib.es6-e0840efa.js';
+import { U as UserAvatar } from './index-93c8863d.js';
+import { u as useScreenSize } from './index.styles-25454e9c.js';
+import './index-9e220aaa.js';
+import { C as CommonGAssets } from './index-9f076f64.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-f873578b.js';
+import { B as Button } from './index-9c268a93.js';
+import { T as Text } from './index-99551970.js';
+import { theme } from './miscTheme.js';
+import { I as ImageWrap } from './index-4cf37916.js';
+import styled from '@emotion/styled';
+import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
+import { keyframes } from '@emotion/react';
+import { H as Heading } from './index-1a2bc551.js';
+import { M as Modal } from './index-ed292946.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 StyledLoading = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1em;
+  button {
+    position: relative;
+  }
+`;
+const circle = keyframes `
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+styled.div `
+  display: flex;
+  width: fit-content;
+  width: -moz-fit-content;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 2rem;
+  background: white;
+  border-radius: ${theme.borderRadius};
+  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
+    -2px 2px 5px rgba(67, 86, 100, 0.123689);
+  .loading-spinner {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 0.5rem;
+    animation: ${circle} 1.2s linear infinite;
+  }
+  &[data-is-marrybaby='true'] {
+    box-shadow: none;
+  }
+`;
+
+const Loading = ({ className, size = 'md' }) => {
+    const { t } = useTranslations();
+    return (React__default.createElement(StyledLoading, { className: className },
+        React__default.createElement(Button, { size: size, color: "transparent", isLoading: true }, t('loading'))));
+};
+
+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, subLine, authActionWrapper, profileProps, profileModalProps, extendEle, avatarProps, hideInfo, timeText, onCloseFromPost, 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 || userType === 'chatbot') {
+            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) {
+            import('./togetherMoleculesProfileDetail.js').then((module) => {
+                setProfileDetail(() => module.ProfileDetail);
+            });
+        }
+    }, [open]);
+    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();
+            } }, 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 }, 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)',
+                                    } }))) : (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, Loading as L, PopupExpert as P, PopupDoctor as a, PopupHospital as b, ProfileDetailModal as c, CardAuthor$1 as d };