'use strict';

var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var dayjs = require('dayjs');
var relativeTime = require('dayjs/plugin/relativeTime');
var index$2 = require('./index-3643ff1b.js');
var utils = require('./utils-b92a8b1c.js');
var index$1 = require('./index-5fc323d7.js');
var index$a = require('./index-4e13f8c3.js');
var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var index = require('./index-17dd60b9.js');
var index$4 = require('./index-af9c3c64.js');
require('./index-6ce6e395.js');
var index$7 = require('./index-b0ce6f8f.js');
var togetherComponentGlobalContext = require('./utils-302bc65c.js');
var index$6 = require('./index-98ac1127.js');
var index$5 = require('./index-a31ed3e1.js');
var miscTheme = require('./miscTheme.js');
var styled = require('@emotion/styled');
var togetherApiPaths = require('./togetherApiPaths.js');
var index$3 = require('./index-9747120c.js');
var index$8 = require('./index-d54fe628.js');
var index$9 = require('./index-16480bf7.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
var relativeTime__default = /*#__PURE__*/_interopDefault(relativeTime);
var styled__default = /*#__PURE__*/_interopDefault(styled);

var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};

const MainText = ({ children, className = '' }) => {
    return React__default["default"].createElement("div", { className: `${styles$2.mainTxt} ${className}` }, children);
};
const SubText = ({ children, className = '' }) => {
    return React__default["default"].createElement("div", { className: `${styles$2.subTxt} ${className}` }, children);
};
const SubTextRow = (_a) => {
    var { children, className = '' } = _a, rest = tslib_es6.__rest(_a, ["children", "className"]);
    return (React__default["default"].createElement("div", Object.assign({ className: `${styles$2.subTxtRow} ${className}` }, rest), children));
};
const SubDivider = ({ className = '' }) => {
    return React__default["default"].createElement("span", { className: `${styles$2.subDivider} ${className}` });
};
const Row = ({ children, className = '' }) => {
    return React__default["default"].createElement("div", { className: `${styles$2.row} ${className} row` }, children);
};
const ColLeft = ({ children, className = '' }) => {
    return React__default["default"].createElement("div", { className: `${className} col-left` }, children);
};
const ColRight = ({ children, className = '' }) => {
    return React__default["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["default"].createElement("div", { className: `${styles$1.container} ${className}`, style: style },
        React__default["default"].createElement("div", { className: styles$1.avatarWrapper, onClick: onAvatarClick, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel },
            React__default["default"].createElement(index.UserAvatar, Object.assign({}, avatarProps)),
            avatarIcon && React__default["default"].createElement("div", { className: styles$1.avatarIcon }, avatarIcon)),
        React__default["default"].createElement("div", { className: `${styles$1.info} ${className}`, style: { minHeight: `${(avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.size) || 40}px` } }, children || (React__default["default"].createElement(React__default["default"].Fragment, null,
            title && React__default["default"].createElement(MainText, null, title),
            subTitle && React__default["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 = core.createStyles(() => {
    return {
        root: {
            verticalAlign: 'bottom',
        },
    };
});

const CardAuthorContext = React.createContext({});

const AuthorBadgeItem = ({ styles, className, classNames, }) => {
    const { role, siteType, title } = React.useContext(CardAuthorContext);
    const { cx, classes } = useStyles$1(undefined, {
        name: 'AuthorBadgeItem',
        styles,
        classNames,
    });
    return role ? (React__default["default"].createElement(index$1.AuthorBadge, { className: cx(classes.root, className), siteType: siteType, role: role, title: title })) : null;
};

const DisplayName = () => {
    const { displayName } = React.useContext(CardAuthorContext);
    return React__default["default"].createElement(core.Box, null, displayName);
};

var useStyles = core.createStyles(() => {
    return {
        root: {},
    };
});

const StyledPopup$2 = styled__default["default"].div `
  position: fixed;
  left: 50%;
  width: 343px;
  background-color: ${miscTheme.theme.colors.white};
  border-radius: ${miscTheme.theme.borderRadius};
  box-shadow: 0px 0px 4px ${miscTheme.theme.colors.gray200};
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;

  ${utils.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 {
    ${utils.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: ${miscTheme.theme.colors.primary50};
    border-radius: ${miscTheme.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__default["default"].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__default["default"].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__default["default"].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__default["default"].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 = index$7.CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
    var _a, _b, _c;
    const { t } = index$2.useTranslations();
    const [doctorInfo, setDoctorInfo] = React.useState(null);
    const [isLoading, setIsLoading] = React.useState(false);
    React.useEffect(() => {
        if (isOpen && doctorId && String(doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.id) !== String(doctorId)) {
            setIsLoading(true);
            try {
                setDoctorInfo(null);
                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getCarePath(togetherApiPaths.CARE_PATHS.GET_DOCTOR_INFO, {
                    doctorId: doctorId,
                    website_url: togetherComponentGlobalContext.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["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(StyledPopup$2, { "data-open": isOpen, "data-animation": enableAnimation, onClick: (e) => e.stopPropagation() }, isLoading || !doctorInfo ? (React__default["default"].createElement(index$3.Loading, null)) : (React__default["default"].createElement("div", { className: "popup-content" },
            React__default["default"].createElement("div", { className: "close-button", onClick: onClose },
                React__default["default"].createElement("img", { src: CloseLight, style: { width: 20, height: 20 }, alt: "close-icon", loading: "lazy" })),
            React__default["default"].createElement("div", { className: "main-info" },
                React__default["default"].createElement("div", { className: "border-banner" }),
                React__default["default"].createElement("div", { className: "avatar-title" },
                    React__default["default"].createElement(StyledProfileImage$2, null,
                        React__default["default"].createElement("div", { className: "image-container" },
                            React__default["default"].createElement("div", { style: { position: 'relative' } },
                                React__default["default"].createElement(index$4.ImageWrap, { src: doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.avatar, backupSrc: avatarFallback, className: "profile-image", alt: "avatar" }),
                                React__default["default"].createElement("img", { className: "badge-avatar", src: ReviewerMedical, alt: "badge", loading: "lazy" })))),
                    React__default["default"].createElement(StyledTitleContainer$2, null,
                        React__default["default"].createElement(index$5.Text, { size: "s3", weight: "semiBold", className: "full-name" }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.name),
                        React__default["default"].createElement("div", { className: "specialty" },
                            specialtiesList && (React__default["default"].createElement(React__default["default"].Fragment, null,
                                React__default["default"].createElement(index$5.Text, { size: "p4", color: miscTheme.theme.colors.gray800 },
                                    specialtiesList,
                                    ' • '))),
                            React__default["default"].createElement("a", { href: togetherComponentGlobalContext.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["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization.name))))),
                !isMobile && (React__default["default"].createElement("div", { className: "btn-wrapper" },
                    React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareDoctorUrl({
                            name: doctorInfo.name,
                            id: doctorInfo.id,
                            locale: locale,
                        }) },
                        React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment')))))),
            formattedExperiences && (React__default["default"].createElement(StyledTitleContainer$2, null,
                React__default["default"].createElement("div", { className: "experience" },
                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "s3", color: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
                    React__default["default"].createElement(StyledExperienceList, null, formattedExperiences.map((experience, i) => (React__default["default"].createElement("li", { key: i },
                        React__default["default"].createElement(index$5.Text, { size: "p2" }, renderExperienceText(experience)))))),
                    isMobile ? (React__default["default"].createElement("div", { className: "btn-wrapper" },
                        React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareDoctorUrl({
                                name: doctorInfo.name,
                                id: doctorInfo.id,
                                locale: locale,
                            }) },
                            React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareDoctorUrl({
                            name: doctorInfo.name,
                            id: doctorInfo.id,
                            locale: locale,
                        }) },
                        React__default["default"].createElement(index$5.Text, { size: "s4", color: "#2D87F3", style: { paddingTop: 24 }, "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) +
                                togetherComponentGlobalContext.getCareDoctorUrl({
                                    name: doctorInfo.name,
                                    id: doctorInfo.id,
                                    locale: locale,
                                }) }, t('home.seeExpert')))))))))),
        React__default["default"].createElement(StyledPopupWrapper$2, { "data-open": isOpen, onClick: (e) => {
                e.stopPropagation();
                onClose();
            } })));
};

const StyledPopup$1 = styled__default["default"].div `
  position: fixed;
  left: 50%;
  width: 343px;
  background-color: ${miscTheme.theme.colors.white};
  border-radius: ${miscTheme.theme.borderRadius};
  box-shadow: 0px 0px 4px ${miscTheme.theme.colors.gray200};
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;

  ${utils.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 {
    ${utils.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: ${miscTheme.theme.colors.primary50};
    border-radius: ${miscTheme.theme.borderRadius};

    .avatar-title {
      position: relative;
      width: 100%;
      padding-top: 46px;
      text-align: center;
    }
  }
`;
const StyledPopupWrapper$1 = styled__default["default"].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__default["default"].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__default["default"].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__default["default"].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 = index$7.CommonGAssets.getAssetPath('avatar.jpg'), }) => {
    const { t } = index$2.useTranslations();
    const [expertInfo, setExpertInfo] = React.useState(null);
    const [isLoading, setIsLoading] = React.useState(false);
    React.useEffect(() => {
        if (isOpen &&
            expertId &&
            String(expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.user_id) !== String(expertId)) {
            setIsLoading(true);
            try {
                setExpertInfo(null);
                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getDiscoverApiPath(togetherApiPaths.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["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(StyledPopup$1, { "data-open": isOpen, "data-animation": enableAnimation, onClick: (e) => e.stopPropagation() }, isLoading || !expertInfo ? (React__default["default"].createElement(index$3.Loading, null)) : (React__default["default"].createElement("div", { className: "popup-content" },
            React__default["default"].createElement("div", { className: "close-button", onClick: onClose },
                React__default["default"].createElement("img", { src: CloseLight, style: { width: 20, height: 20 }, alt: "close-icon", loading: "lazy" })),
            React__default["default"].createElement("div", { className: "main-info" },
                React__default["default"].createElement("div", { className: "border-banner" }),
                React__default["default"].createElement("div", { className: "avatar-title" },
                    React__default["default"].createElement(StyledProfileImage$1, null,
                        React__default["default"].createElement("div", { className: "image-container" },
                            React__default["default"].createElement("div", { style: { position: 'relative' } },
                                React__default["default"].createElement(index$4.ImageWrap, { src: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.avatar, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
                                React__default["default"].createElement("img", { className: "badge-avatar", src: ReviewerIconMap[expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.role], alt: "badge", loading: "lazy" })))),
                    React__default["default"].createElement(StyledTitleContainer$1, null,
                        React__default["default"].createElement(index$5.Text, { size: "s3", className: "full-name", weight: "semiBold" }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.display_name),
                        React__default["default"].createElement("div", null,
                            React__default["default"].createElement(index$5.Text, { size: "p4", color: miscTheme.theme.colors.gray800 }, expertInfo === null || expertInfo === void 0 ? void 0 :
                                expertInfo.specialty,
                                ' • '),
                            React__default["default"].createElement("a", { href: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation_url, className: "organisation", target: "_blank", rel: "noreferrer" },
                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation)))))),
            React__default["default"].createElement(StyledTitleContainer$1, null,
                React__default["default"].createElement("div", { className: "experience" },
                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "p4", color: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
                    React__default["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["default"].createElement(StyledItem, { key: index },
                            React__default["default"].createElement("img", { className: "bullet-point", src: BulletPoint, alt: "point", loading: "lazy" }),
                            React__default["default"].createElement("div", { className: "text-contain" },
                                React__default["default"].createElement(index$8.Heading, { tag: "h6", color: miscTheme.theme.colors.gray800 }, experience === null || experience === void 0 ? void 0 : experience.title),
                                React__default["default"].createElement(index$5.Text, { size: "p2", color: miscTheme.theme.colors.gray500 }, experience === null || experience === void 0 ? void 0 : experience.organization)))))
                        : false),
                    React__default["default"].createElement("a", { href: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url, style: { display: 'inline-block', paddingTop: 24 } },
                        React__default["default"].createElement(index$5.Text, { as: "span", size: "s4", color: "#2D87F3", "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) + (expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url) }, t('home.seeExpert')))))))),
        React__default["default"].createElement(StyledPopupWrapper$1, { "data-open": isOpen, onClick: (e) => {
                e.stopPropagation();
                onClose();
            } })));
};

const StyledPopup = styled__default["default"].div `
  position: fixed;
  left: 50%;
  width: 343px;
  background-color: ${miscTheme.theme.colors.white};
  border-radius: ${miscTheme.theme.borderRadius};
  box-shadow: 0px 0px 4px ${miscTheme.theme.colors.gray200};
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;

  ${utils.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 {
    ${utils.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: ${miscTheme.theme.colors.primary50};
    border-radius: ${miscTheme.theme.borderRadius};
    .btn-booking {
      display: flex;
      margin: 12px auto;
    }
    .avatar-title {
      position: relative;
      width: 100%;
      padding-top: 46px;
      text-align: center;
    }
  }
`;
const StyledPopupWrapper = styled__default["default"].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__default["default"].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__default["default"].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 = index$7.CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
    const { t } = index$2.useTranslations();
    const [hospitalInfo, setHospitalInfo] = React.useState(null);
    const [isLoading, setIsLoading] = React.useState(false);
    React.useEffect(() => {
        if (isOpen &&
            hospitalId &&
            String(hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.id) !== String(hospitalId)) {
            setIsLoading(true);
            try {
                setHospitalInfo(null);
                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getCarePath(togetherApiPaths.CARE_PATHS.GET_HOSPITAL_INFO, {
                    hospital_branch_id: hospitalId,
                    website_url: togetherComponentGlobalContext.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 = React.useMemo(() => specialties.map((specialty) => specialty.name), [specialties]);
    return (React__default["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(StyledPopup, { "data-open": isOpen, "data-animation": enableAnimation, onClick: (e) => e.stopPropagation() }, isLoading || !hospitalInfo ? (React__default["default"].createElement(index$3.Loading, null)) : (React__default["default"].createElement("div", { className: "popup-content" },
            React__default["default"].createElement("div", { className: "close-button", onClick: onClose },
                React__default["default"].createElement("img", { src: CloseLight, style: { width: 20, height: 20 }, alt: "close-icon", loading: "lazy" })),
            React__default["default"].createElement("div", { className: "main-info" },
                React__default["default"].createElement("div", { className: "border-banner" }),
                React__default["default"].createElement("div", { className: "avatar-title" },
                    React__default["default"].createElement(StyledProfileImage, null,
                        React__default["default"].createElement("div", { className: "image-container" },
                            React__default["default"].createElement("div", { style: { position: 'relative' } },
                                React__default["default"].createElement(index$4.ImageWrap, { src: hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.logo, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
                                React__default["default"].createElement("img", { className: "badge-avatar", src: ReviewerMedical, alt: "badge", loading: "lazy" })))),
                    React__default["default"].createElement(StyledTitleContainer, null,
                        React__default["default"].createElement(index$5.Text, { size: "s3", weight: "semiBold", className: "full-name" }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name),
                        React__default["default"].createElement("div", { className: "specialty" },
                            specialties && (React__default["default"].createElement(index$5.Text, { size: "p4", color: miscTheme.theme.colors.gray800 },
                                formatSpecialties.join(' • '),
                                '•')),
                            React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
                                    id: hospitalInfo.id,
                                    name: hospitalInfo.name,
                                    slug: hospitalInfo.slug,
                                    locale,
                                }), className: "organisation", target: "_blank", rel: "noreferrer" },
                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name))))),
                !isMobile && (React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
                        id: hospitalInfo.id,
                        name: hospitalInfo.name,
                        slug: hospitalInfo.slug,
                        locale,
                    }) },
                    React__default["default"].createElement("div", { className: "btn-wrapper" },
                        React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment')))))),
            React__default["default"].createElement(StyledTitleContainer, null,
                React__default["default"].createElement("div", { className: "experience" },
                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "s3", color: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('hospital.content.description').toUpperCase()),
                    React__default["default"].createElement(index$5.Text, { size: "p2", color: miscTheme.theme.colors.gray500 }, hospitalInfo.about),
                    isMobile ? (React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
                            id: hospitalInfo.id,
                            name: hospitalInfo.name,
                            slug: hospitalInfo.slug,
                            locale,
                        }) },
                        React__default["default"].createElement("div", { className: "btn-wrapper" },
                            React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
                            id: hospitalInfo.id,
                            name: hospitalInfo.name,
                            slug: hospitalInfo.slug,
                            locale,
                        }) },
                        React__default["default"].createElement(index$5.Text, { size: "s4", color: "#2D87F3", as: "span", "data-event-category": trackingCategory, "data-event-action": "See Full Hospital Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) +
                                togetherComponentGlobalContext.getCareHospitalUrl({
                                    id: hospitalInfo.id,
                                    name: hospitalInfo.name,
                                    slug: hospitalInfo.slug,
                                    locale,
                                }) }, t('home.seeHospital'))))))))),
        React__default["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 } = index$2.useTranslations();
    return (React__default["default"].createElement(index$9.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__default["default"].extend(relativeTime__default["default"]);
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 }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
    const { isMobile } = index$4.useScreenSize();
    const { t } = index$2.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
        ? index$7.CommonGAssets.getAssetPath('avatar.jpg')
        : avatarProp;
    const role = isAnonymous ? undefined : roleProp;
    const [openPopupExpert, setOpenPopupExpert] = React.useState(false);
    const { asPath } = router || {};
    const currentUrl = `https://${constantsDomainLocales.domainLocales[locale]}${asPath}`;
    const onAuthorClick = () => {
        if (isAnonymous) {
            return false;
        }
        if (showDetailPopup) {
            setOpen(true);
        }
        else if (url) {
            window.location.href = url;
        }
    };
    React.useEffect(() => {
        utils.toggleNoScroll(openPopupExpert);
    }, [openPopupExpert]);
    const [open, setOpen] = React.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["default"].createElement("span", null, organisation),
        role === 'expert' && specialty && React__default["default"].createElement("span", null, specialty),
        !(role === 'expert' && specialty && organisation) && (community === null || community === void 0 ? void 0 : community.name) && (React__default["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["default"].createElement("span", null, timeText),
    ].filter(Boolean);
    const [ProfileDetail, setProfileDetail] = React.useState(null);
    React.useEffect(() => {
        if (open && !ProfileDetail) {
            if (userType === 'chatbot') {
                Promise.resolve().then(function () { return require('./index-e316d555.js'); }).then((module) => {
                    setProfileDetail(() => module.ProfileChatbot);
                });
            }
            else {
                Promise.resolve().then(function () { return require('./togetherMoleculesProfileDetail.js'); }).then((module) => {
                    setProfileDetail(() => module.ProfileDetail);
                });
            }
        }
    }, [open, userType]);
    return (React__default["default"].createElement(CardAuthorContext.Provider, { value: {
            displayName,
            title,
            role,
            siteType,
            handleMakeAppointment,
            doctorId,
            hospitalId,
            currentUrl,
        } },
        React__default["default"].createElement(ProfileDetailModal, { open: open, onClose: () => setOpen(false), profileModalProps: profileModalProps }, ProfileDetail && (React__default["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["default"].createElement(PopupExpert, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), expertId: expertId })) : null,
        role === 'expert' && doctorId ? (React__default["default"].createElement(PopupDoctor, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), doctorId: doctorId, locale: locale })) : null,
        role === 'expert' && hospitalId ? (React__default["default"].createElement(PopupHospital, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), hospitalId: hospitalId, locale: locale })) : null,
        React__default["default"].createElement("div", { className: `hhg-card-author ${classes.root} ${className} ${isExpert ? 'expert-author' : ''}`, "data-background": !hideBackground && isExpert, "data-is-marrybaby": isMarryBaby },
            React__default["default"].createElement(CardAuthor$1, { dataEventCategory: dataEventCategory, dataEventAction: dataEventAction, dataEventLabel: dataEventLabel, onAvatarClick: onAuthorClick, avatarProps: Object.assign(Object.assign({ avatar: isAnonymous
                        ? index$7.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["default"].createElement(other.CrossLogo, { size: badgeIconSize || 15 })) }, children ? (React__default["default"].createElement("div", { onClick: onAuthorClick }, children)) : (!hideInfo && (React__default["default"].createElement(CardAuthor$1.Row, null,
                React__default["default"].createElement(CardAuthor$1.ColLeft, null,
                    React__default["default"].createElement(core.Flex, { align: 'center', onClick: onAuthorClick },
                        React__default["default"].createElement(CardAuthor$1.MainText, { onClick: onAuthorClick },
                            displayName,
                            userType === 'chatbot' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                                ' ',
                                React__default["default"].createElement(other.ShieldCheck, { color: miscTheme.theme.colors.primaryBase, size: 16, style: {
                                        display: 'inline-block',
                                        transform: 'translate(0, 2px)',
                                    } }),
                                showChatbotButton && (React__default["default"].createElement("div", { style: { marginTop: '8px' } },
                                    React__default["default"].createElement(core.Button, { color: "primary", size: "xs", variant: "filled", type: "button", leftIcon: React__default["default"].createElement(index$a.Icon.App, { size: 16 }), onClick: () => {
                                            onChatWithBot === null || onChatWithBot === void 0 ? void 0 : onChatWithBot();
                                        } }, t('chatbot.with.me')))))) : (React__default["default"].createElement(AuthorBadgeItem, null)))),
                    subLine || (React__default["default"].createElement(CardAuthor$1.SubTextRow, { style: hasQuickBooking
                            ? {
                                position: 'relative',
                            }
                            : {} },
                        subItemList.map((i, idx) => (React__default["default"].createElement(React__default["default"].Fragment, null,
                            idx !== 0 && React__default["default"].createElement(CardAuthor$1.SubDivider, null),
                            React__default["default"].createElement(CardAuthor$1.SubText, null, i)))),
                        hasQuickBooking && bookingAvai && (React__default["default"].createElement(core.Box, { sx: {
                                marginTop: core.rem(5),
                                // position: 'absolute',
                                // bottom: `${-bookingBtnSize}px`,
                                // left: 0,
                            } },
                            React__default["default"].createElement(index$1.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;

exports.CardAuthor = CardAuthor;
exports.CardAuthor$1 = CardAuthor$1;
exports.PopupDoctor = PopupDoctor;
exports.PopupExpert = PopupExpert;
exports.PopupHospital = PopupHospital;
exports.ProfileDetailModal = ProfileDetailModal;
