@hhgtech/hhg-components 1.29.535 → 1.29.537-beta-1

package/build/esm/{transform-213aeec0.js → transform-31c4d3f9.js}

@@ -1,57 +1,67 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-a0384612.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-21073c93.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio, a as Carousel } from './index-f6da221e.js';
-import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Modal, Grid } from '@mantine/core';
+import { R as Radio, a as Carousel } from './index-cd656759.js';
+import { Stack, Group, createStyles, getStylesRef, useMantineTheme, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Modal as Modal$1, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS, Z as ZINDEX_SSO } from './index-07cff58f.js';
-import './index-bd830446.js';
-import { C as CommonGAssets } from './index-294e58af.js';
-import './index-3cff246c.js';
-import { T as Text } from './index-6000efaf.js';
-import { B as Button$1 } from './index-d7adbd8c.js';
-import './index-2b013c48.js';
-import './index.styles-2ff6ebfe.js';
-import './translationsContext-e6c3e73e.js';
-import '@mantine/hooks';
-import { M as MediaQueries } from './utils-75979f59.js';
-import './index-4c3d7535.js';
-import { i as isInternalLink } from './SiteWideBanner-01ff6f25.js';
+import { L as LOCALE_SPECS, F as FAVICONS, I as ISO_FORMAT, Z as ZINDEX_SSO } from './index-cdc53951.js';
+import './index-157ac67c.js';
+import { C as CommonGAssets } from './index-37e16100.js';
+import './index-22c474de.js';
+import { T as Text } from './index-f3039502.js';
+import { B as Button$1 } from './index-be940957.js';
+import { F as FontWeight } from './index-d7e6093a.js';
+import './index.styles-0a7b8af0.js';
+import './translationsContext-9687e179.js';
+import { useDisclosure } from '@mantine/hooks';
+import { M as MediaQueries } from './utils-0c1f4154.js';
+import './index-e28977c2.js';
+import { i as isInternalLink } from './SiteWideBanner-e5ec5bce.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-1151b9b1.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-7deaccf5.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-75af317c.js';
+import { L as Logo } from './index-9897596d.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-0a274f76.js';
+import { a as useOutsideClick } from './useOutsideClick-6a06a79e.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-2144f0d9.js';
-import { u as useScreenSize, I as ImageWrap } from './index-9587bce9.js';
-import { u as useTranslations } from './index-570af628.js';
+import { B as Button } from './index-723442ee.js';
+import { u as useScreenSize, I as ImageWrap } from './index-0ba6e582.js';
+import { u as useTranslations, f as format$1 } from './index-36070e8a.js';
 import classNames from 'classnames';
-import { D as Dropdown } from './index-580b9497.js';
+import { D as Dropdown } from './index-8515713a.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-1c6a96de.js';
-import { D as Drawer } from './index-ab91bcc6.js';
+import { I as Input } from './index-e880f40e.js';
+import { D as Drawer } from './index-557cec93.js';
+import { D as DrawerBottom } from './index-2fb9d703.js';
+import { M as Modal } from './index-87e6d4d7.js';
+import { b as formatArticle } from './dataTransform-1cf6bd7f.js';
+import { DISCOVER_PATHS } from './togetherApiPaths.js';
+import { c as callApi, g as getDiscoverApiPath } from './utils-ab3bb43d.js';
+import innertext from 'innertext';
+import { L as LOCALE } from './Locale-8aeb6d32.js';
+import { g as getHelloSitesUrl } from './index-fe82ec92.js';
+import { P as POST_DATE_FORMAT, D as DEFAULT_AVATAR_IMG, a as DEFAULT_IMG } from './constants-2398da08.js';
+import dayjs from 'dayjs';
+import { ArticleCard } from './moleculesArticleCard.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-7d1c6b26.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-7267f522.js';
-import { L as Loading } from './index-560abde8.js';
+import { A as ArrowRightBlue } from './index-82e4c85c.js';
+import { L as Loading } from './index-0f306c2c.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
-import { C as Close } from './Close-95af7d68.js';
+import { C as Close } from './index-19ee9e8f.js';
 import { useAnimationOffsetEffect } from '@mantine/carousel';
-import { D as DEFAULT_HEADER_HEIGHT_MOBILE } from './constants-99982074.js';
+import { D as DEFAULT_HEADER_HEIGHT_MOBILE } from './constants-4fcb4107.js';
 
 const StarFull = (_a) => {
     var { color, stroke } = _a, props = __rest(_a, ["color", "stroke"]);
@@ -2790,6 +2800,631 @@ const ShareDrawer = (_a) => {
     }
 };
 
+const BoostCardArticleAuthorName = (props) => {
+    const { intlKey, formatOptions, formatOptionsProps } = props;
+    const { author_name, expert_display_name, fact_check_display_name, specialty, organisation, post_modified, } = formatOptions || {};
+    const { author_name: formatOptionsPropsAuthorName, expert_display_name: formatOptionsPropsExpertDisplayName, fact_check_display_name: formatOptionsPropsFactCheckDisplayName, specialty: formatOptionsPropsSpecialty, organisation: formatOptionsPropsOrganisation, post_modified: formatOptionsPropsPostModified, } = formatOptionsProps || {};
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const formatOptionsComp = useCallback((p = {}) => {
+        const href = p.href;
+        const Comp = href ? 'a' : 'span';
+        const propsComp = Object.assign({}, p);
+        if (!href) {
+            delete propsComp.href;
+            delete propsComp['data-event-category'];
+            delete propsComp['data-event-action'];
+            delete propsComp['data-event-label'];
+        }
+        return React__default.createElement(Comp, Object.assign({}, propsComp));
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null, format$1(t(intlKey), {
+        author_name: (React__default.createElement("span", { style: {
+                fontWeight: FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, author_name), formatOptionsPropsAuthorName)))),
+        expert_display_name: (React__default.createElement("span", { style: {
+                fontWeight: FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, expert_display_name), formatOptionsPropsExpertDisplayName)))),
+        fact_check_display_name: (React__default.createElement("span", { style: {
+                fontWeight: FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, fact_check_display_name), formatOptionsPropsFactCheckDisplayName)))),
+        specialty: formatOptionsComp(Object.assign(Object.assign({}, specialty), formatOptionsPropsSpecialty)),
+        organisation: formatOptionsComp(Object.assign(Object.assign({}, organisation), formatOptionsPropsOrganisation)),
+        post_modified: formatOptionsComp(Object.assign(Object.assign({}, post_modified), formatOptionsPropsPostModified)),
+    })));
+};
+
+const getAuthorFormatOptionsProps = (reviewedUser) => {
+    if (!reviewedUser) {
+        return { children: '' };
+    }
+    if ((reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.profile_url) && (reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.turn_off_profile)) {
+        return { children: (reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.display_name) || (reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.name) || '' };
+    }
+    return {
+        href: reviewedUser.profile_url || '',
+        children: reviewedUser.display_name || reviewedUser.name || '',
+    };
+};
+const authorConfigForAssetBase = (assetImageBase) => {
+    const base = assetImageBase.replace(/\/$/, '');
+    return {
+        medical: {
+            intlKey: {
+                long: 'articlePage.reviewed_by.expert.medical',
+                short: 'articlePage.reviewed_by.expert.medical.short',
+            },
+            indicator: `${base}/reviewer-medical.svg`,
+        },
+        expert: {
+            intlKey: {
+                long: 'articlePage.reviewed_by.expert',
+                short: 'articlePage.reviewed_by.expert.short',
+            },
+            indicator: `${base}/reviewer-expert.svg`,
+        },
+        written_by: {
+            intlKey: {
+                long: 'articlePage.written_by.author',
+                short: 'articlePage.written_by.author.short',
+            },
+            indicator: `${base}/reviewer-editor.svg`,
+        },
+        fact_checked_by: {
+            intlKey: {
+                long: 'articlePage.fact_checked_by.author',
+                short: 'articlePage.fact_checked_by.author.short',
+            },
+            indicator: `${base}/reviewer-fact-check.svg`,
+        },
+    };
+};
+function getAuthorForBoostCard({ article, locale, assetImageBase, version = 'short', }) {
+    const AUTHOR_CONFIG = authorConfigForAssetBase(assetImageBase);
+    const { expert, author, fact_check, is_author } = article.articleReviewed || {};
+    const articlePostModified = article.postModified || article.modifiedTime;
+    const { avatar: fcAvatar = '', avatar_thumbnail: fcAvatarThumb = '', display_name: fcDisplayName = '', name: fcName = '', profile_url: fcProfileUrl = '', turn_off_profile: fcTurnOffProfile, } = fact_check || {};
+    const modifiedDate = dayjs(articlePostModified);
+    let authorConfig = AUTHOR_CONFIG.fact_checked_by;
+    let avatar = fcAvatarThumb || fcAvatar;
+    let avatar_alt = fcDisplayName || fcName;
+    let avatar_permalink = !fcTurnOffProfile ? fcProfileUrl : '';
+    const post_modified = modifiedDate.isValid()
+        ? modifiedDate.format(ISO_FORMAT[locale].dateFormat)
+        : '';
+    const formatOptions = {
+        expert_display_name: getAuthorFormatOptionsProps(expert),
+        author_name: getAuthorFormatOptionsProps(author),
+        fact_check_display_name: getAuthorFormatOptionsProps(fact_check),
+        post_modified: { children: post_modified },
+    };
+    if (expert) {
+        const ex = expert;
+        const { avatar: exAvatar = '', avatar_thumbnail: exAvatarThumb = '', display_name: exDisplayName = '', name: exName = '', profile_url: exProfileUrl = '', specialty = '', organisation = '', turn_off_profile: exTurnOffProfile, } = ex;
+        formatOptions.specialty = { children: specialty };
+        formatOptions.organisation = { children: organisation };
+        avatar = exAvatarThumb || exAvatar || avatar;
+        avatar_alt = exDisplayName || exName || avatar_alt;
+        avatar_permalink = !exTurnOffProfile ? exProfileUrl || avatar_permalink : '';
+        if (is_author) {
+            authorConfig = AUTHOR_CONFIG.written_by;
+        }
+        else {
+            authorConfig = AUTHOR_CONFIG.expert;
+        }
+    }
+    return {
+        intlKey: authorConfig.intlKey[version],
+        indicator: authorConfig.indicator,
+        avatar,
+        avatar_alt,
+        avatar_permalink,
+        formatOptions,
+    };
+}
+
+const StyledAvatarReviewer = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  img {
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+`;
+styled.div `
+  width: 12px;
+  height: 12px;
+`;
+const StyledArticleCard = styled(ArticleCard) `
+  .author .poster p span:not(.author-name) {
+    font-weight: 400;
+  }
+
+  .author .poster p span:not(.name) {
+    color: ${theme.colors.gray800};
+  }
+
+  .author-name {
+    font-weight: 600;
+  }
+`;
+const StyledItemImageContain = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
+
+function renderBoostUploadTime(locale, date) {
+    if (!date)
+        return '';
+    if (dayjs(date, POST_DATE_FORMAT).isValid()) {
+        return dayjs(date, POST_DATE_FORMAT).format(ISO_FORMAT[locale].dateFormat);
+    }
+    return date;
+}
+
+function PopupBoostArticleCard({ article, isMobile, className = 'article-card', hideBookmark = true, assetImageBase = '/images', }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { locale: translationsLocale } = useTranslations();
+    const locale = translationsLocale === 'vi-VN_MB'
+        ? LOCALE.Vietnam
+        : translationsLocale;
+    const authorV2 = getAuthorForBoostCard({
+        article,
+        locale,
+        assetImageBase,
+        version: 'short',
+    });
+    const authorUrlDomain = authorV2.avatar_permalink
+        ? `${getHelloSitesUrl(translationsLocale, true)}${authorV2.avatar_permalink}`
+        : '';
+    const domain = domainLocales[translationsLocale];
+    const articleUrlLabel = domain && article.permalink
+        ? `https://${domain}${article.permalink}`
+        : article.permalink || '';
+    const uploadRendered = renderBoostUploadTime(locale, article.modifiedTime);
+    const loc = translationsLocale;
+    const isPremiumUi = loc !== 'vi-VN' && loc !== 'vi-VN_MB' && article.isPremium;
+    const avatarInner = (React__default.createElement(StyledAvatarReviewer, null,
+        React__default.createElement(StyledItemImageContain, null,
+            React__default.createElement("img", { className: "avatar", src: authorV2.avatar || DEFAULT_AVATAR_IMG, alt: authorV2.avatar_alt, width: 24, height: 24, style: {
+                    borderRadius: '50%',
+                    objectFit: 'cover',
+                    display: 'block',
+                } }))));
+    return (React__default.createElement(StyledArticleCard, { isPremium: isPremiumUi, isMobile: isMobile, className: className, dataEventCategoryForBookmark: "Bookmark", dataEventActionForBookmark: "Click", dataEventLabelForBookmark: articleUrlLabel, dataEventLabelForTitle: articleUrlLabel, dataEventLabelForCategory: ((_a = article.category) === null || _a === void 0 ? void 0 : _a.permalink) && domain
+            ? `https://${domain}${article.category.permalink}`
+            : ((_b = article.category) === null || _b === void 0 ? void 0 : _b.permalink) || '', dataEventLabelForBanner: articleUrlLabel, hasAffiliate: article.hasAffiliate, articleLink: article.permalink, categoryLink: ((_c = article.category) === null || _c === void 0 ? void 0 : _c.permalink) || '#', categoryName: ((_d = article.category) === null || _d === void 0 ? void 0 : _d.displayName) ||
+            ((_e = article.category) === null || _e === void 0 ? void 0 : _e.name) ||
+            ((_g = (_f = article.categories) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.displayName) ||
+            ((_j = (_h = article.categories) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.name) ||
+            '', banner: React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
+                article.featureImage ||
+                DEFAULT_IMG, alt: article.postName, loading: "lazy", style: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                display: 'block',
+            } }), specialty: ((_k = article.expert) === null || _k === void 0 ? void 0 : _k.specialty) || ((_l = article.author) === null || _l === void 0 ? void 0 : _l.specialty) || '', type: "author", size: "md", direction: isMobile ? 'vertical' : 'horizontal', uploadTime: uploadRendered || article.modifiedTime || article.postModified || '', title: innertext(article.postTitle || article.postName || '') || '', text: article.excerpt || article.description || article.postContent
+            ? innertext(article.excerpt ||
+                article.description ||
+                ((_m = article.postContent) === null || _m === void 0 ? void 0 : _m.split('\r\n')[0]) ||
+                '')
+            : '', avatarImg: authorV2.avatar_permalink ? (React__default.createElement("a", { href: authorV2.avatar_permalink, className: "pointer-event-child-none", "data-event-label": authorUrlDomain }, avatarInner)) : (React__default.createElement("span", { className: "pointer-event-child-none" }, avatarInner)), authorName: React__default.createElement("span", { "data-event-label": authorUrlDomain, className: "pointer-event-child-none" },
+            React__default.createElement(BoostCardArticleAuthorName, Object.assign({}, authorV2, { formatOptionsProps: {
+                    expert_display_name: {
+                        href: '',
+                    },
+                } })),
+            "\u00A0"), authorLink: authorV2.avatar_permalink, isBookmarkDisplayed: !hideBookmark, isBookmark: false, onBookmark: hideBookmark ? undefined : () => undefined, styleLabel: {
+            color: ((_o = article.category) === null || _o === void 0 ? void 0 : _o.textColor) || '#008C50',
+        } }));
+}
+
+const BOOST_POPUP_TRACKING_CATEGORY = 'Popup Suggest Article';
+const BOOST_POPUP_GTAG_EVENTS = {
+    swipeToClose: 'swipe_to_close',
+};
+const BOOST_POPUP_TRACKING_ACTION = {
+    closeCard: 'Close card',
+    viewDetail: 'View detail',
+};
+/** Prefer prop/ref URL; if missing (stale parent, first paint), use live location at send time. */
+function resolveBoostPopupEventLabel(propUrl) {
+    var _a;
+    const trimmed = typeof propUrl === 'string' ? propUrl.trim() : '';
+    if (trimmed)
+        return trimmed;
+    if (typeof window !== 'undefined' && ((_a = window.location) === null || _a === void 0 ? void 0 : _a.href)) {
+        return window.location.href;
+    }
+    return '';
+}
+function pushBoostPopupDataLayerEvent(eventName, eventAction, eventLabel) {
+    if (typeof window === 'undefined')
+        return;
+    const w = window;
+    const event_label = resolveBoostPopupEventLabel(eventLabel);
+    if (!event_label)
+        return;
+    if (Array.isArray(w.dataLayer)) {
+        w.dataLayer.push({
+            event: eventName,
+            event_category: BOOST_POPUP_TRACKING_CATEGORY,
+            event_label,
+            event_action: eventAction,
+        });
+    }
+}
+function boostPopupTrackingData(action, label) {
+    return {
+        'data-event-category': BOOST_POPUP_TRACKING_CATEGORY,
+        'data-event-action': action,
+        'data-event-label': (label === null || label === void 0 ? void 0 : label.trim()) || '',
+    };
+}
+
+function PopupBoostPageView({ source, articleId, primaryCategoryId, postId, community, isMobile, basePath, currentUrl, getSpotlightTitle, getSpotlightImage, getSpotlightPermalink, getSpotlightContent, }) {
+    const { t, locale } = useTranslations();
+    const modalHeading = t('popupBoostPageView.modalHeading');
+    const viewDetailText = t('popupBoostPageView.viewDetail');
+    const [requestState, setRequestState] = useState('idle');
+    const [boostType, setBoostType] = useState(null);
+    const [boostArticle, setBoostArticle] = useState(null);
+    const [boostCarePath, setBoostCarePath] = useState(null);
+    const [boostCustom, setBoostCustom] = useState(null);
+    const [delaySeconds, setDelaySeconds] = useState(0);
+    const [sessionPopupShown, setSessionPopupShown] = useState(false);
+    const [opened, { open, close }] = useDisclosure(false);
+    const pendingOpenDeadlineRef = useRef(null);
+    const suppressNextOpenRef = useRef(false);
+    const getSpotlightTitleRef = useRef(getSpotlightTitle);
+    const getSpotlightImageRef = useRef(getSpotlightImage);
+    const getSpotlightPermalinkRef = useRef(getSpotlightPermalink);
+    const getSpotlightContentRef = useRef(getSpotlightContent);
+    getSpotlightTitleRef.current = getSpotlightTitle;
+    getSpotlightImageRef.current = getSpotlightImage;
+    getSpotlightPermalinkRef.current = getSpotlightPermalink;
+    getSpotlightContentRef.current = getSpotlightContent;
+    const currentUrlRef = useRef(currentUrl);
+    currentUrlRef.current = currentUrl;
+    const hasSourceId = source === 'article' ? !!articleId : !!postId;
+    useEffect(() => {
+        if (!hasSourceId) {
+            close();
+            pendingOpenDeadlineRef.current = null;
+            setSessionPopupShown(false);
+            setRequestState('idle');
+            setBoostType(null);
+            setBoostArticle(null);
+            setBoostCarePath(null);
+            setBoostCustom(null);
+            setDelaySeconds(0);
+            return;
+        }
+        if (sessionPopupShown) {
+            return;
+        }
+        close();
+        setBoostType(null);
+        setBoostArticle(null);
+        setBoostCarePath(null);
+        setBoostCustom(null);
+        setDelaySeconds(0);
+        const requestedSourceId = source === 'article' ? articleId : postId;
+        let isActive = true;
+        setRequestState('loading');
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const res = yield callApi(getDiscoverApiPath(DISCOVER_PATHS.GET_BOOST_POPUP_CARD, {
+                type: source,
+                articleId: source === 'article' ? requestedSourceId !== null && requestedSourceId !== void 0 ? requestedSourceId : '' : '',
+                primaryCategoryId: source === 'article' ? primaryCategoryId !== null && primaryCategoryId !== void 0 ? primaryCategoryId : '' : '',
+                community: source === 'community' ? community !== null && community !== void 0 ? community : '' : '',
+                postId: source === 'community' ? requestedSourceId !== null && requestedSourceId !== void 0 ? requestedSourceId : '' : '',
+            }), 'get');
+            if (!isActive)
+                return;
+            const boostPayload = res === null || res === void 0 ? void 0 : res.data;
+            const nextType = (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.type) === 'article' ||
+                (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.type) === 'carepath' ||
+                (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.type) === 'custom'
+                ? boostPayload.type
+                : null;
+            const nextDelaySeconds = typeof (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.delay_time) === 'number' &&
+                boostPayload.delay_time > 0
+                ? boostPayload.delay_time
+                : 0;
+            setBoostType(nextType);
+            setDelaySeconds(nextDelaySeconds);
+            if (nextType === 'article' && (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) {
+                setBoostArticle(formatArticle(boostPayload.boost_data));
+                setBoostCarePath(null);
+                setBoostCustom(null);
+            }
+            else if (nextType === 'carepath' && (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) {
+                const raw = boostPayload.boost_data;
+                const title = getSpotlightTitleRef.current(raw) || '';
+                const image = getSpotlightImageRef.current(raw) || '';
+                const permalink = ((_a = getSpotlightPermalinkRef.current) === null || _a === void 0 ? void 0 : _a.call(getSpotlightPermalinkRef, raw)) ||
+                    String((raw === null || raw === void 0 ? void 0 : raw.permalink) || '');
+                const content = ((_b = getSpotlightContentRef.current) === null || _b === void 0 ? void 0 : _b.call(getSpotlightContentRef, raw)) || String((raw === null || raw === void 0 ? void 0 : raw.content) || '');
+                setBoostCarePath({ permalink, title, image, content });
+                setBoostArticle(null);
+                setBoostCustom(null);
+            }
+            else if (nextType === 'custom' && (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) {
+                const raw = boostPayload.boost_data;
+                setBoostCustom({
+                    link: raw.link || '',
+                    title: raw.title || '',
+                    description: raw.description || '',
+                    image: typeof raw.image === 'string' && raw.image ? raw.image : null,
+                });
+                setBoostArticle(null);
+                setBoostCarePath(null);
+            }
+            else {
+                setBoostArticle(null);
+                setBoostCarePath(null);
+                setBoostCustom(null);
+            }
+            const hasPayloadBoost = (nextType === 'article' && !!(boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) ||
+                (nextType === 'carepath' && !!(boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) ||
+                (nextType === 'custom' &&
+                    !!((_c = boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data) === null || _c === void 0 ? void 0 : _c.link));
+            if (!hasPayloadBoost) {
+                pendingOpenDeadlineRef.current = null;
+            }
+            setRequestState('ready');
+        }))();
+        return () => {
+            isActive = false;
+        };
+    }, [
+        source,
+        articleId,
+        primaryCategoryId,
+        postId,
+        community,
+        close,
+        sessionPopupShown,
+    ]);
+    useEffect(() => {
+        const hasBoostData = (boostType === 'article' && !!boostArticle) ||
+            (boostType === 'carepath' && !!boostCarePath) ||
+            (boostType === 'custom' && !!(boostCustom === null || boostCustom === void 0 ? void 0 : boostCustom.link));
+        if (!hasSourceId ||
+            sessionPopupShown ||
+            requestState !== 'ready' ||
+            !hasBoostData) {
+            return;
+        }
+        if (pendingOpenDeadlineRef.current === null) {
+            pendingOpenDeadlineRef.current = Date.now() + delaySeconds * 1000;
+        }
+        const remainingMs = Math.max(0, pendingOpenDeadlineRef.current - Date.now());
+        const timer = window.setTimeout(() => {
+            pendingOpenDeadlineRef.current = null;
+            setSessionPopupShown(true);
+            open();
+        }, remainingMs);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [
+        articleId,
+        sessionPopupShown,
+        requestState,
+        boostType,
+        boostArticle,
+        boostCarePath,
+        boostCustom,
+        delaySeconds,
+        open,
+    ]);
+    const handleBoostDrawerRelease = useCallback((_event, openAfterRelease) => {
+        if (openAfterRelease)
+            return;
+        pushBoostPopupDataLayerEvent(BOOST_POPUP_GTAG_EVENTS.swipeToClose, BOOST_POPUP_TRACKING_ACTION.closeCard, currentUrlRef.current);
+    }, []);
+    const targetUrl = boostType === 'article'
+        ? boostArticle === null || boostArticle === void 0 ? void 0 : boostArticle.permalink
+        : boostType === 'carepath'
+            ? boostCarePath === null || boostCarePath === void 0 ? void 0 : boostCarePath.permalink
+            : boostType === 'custom'
+                ? boostCustom === null || boostCustom === void 0 ? void 0 : boostCustom.link
+                : null;
+    const boostingUrl = targetUrl
+        ? targetUrl.startsWith('http')
+            ? targetUrl
+            : `${window.location.origin}${basePath}${targetUrl.startsWith('/') ? targetUrl : `/${targetUrl}`}`
+        : null;
+    const hasBoostData = (boostType === 'article' && !!boostArticle) ||
+        (boostType === 'carepath' && !!boostCarePath) ||
+        (boostType === 'custom' && !!(boostCustom === null || boostCustom === void 0 ? void 0 : boostCustom.link));
+    if (!hasSourceId ||
+        requestState !== 'ready' ||
+        !hasBoostData ||
+        !boostingUrl) {
+        return null;
+    }
+    const trimmedBase = basePath.replace(/\/$/, '');
+    const assetImageBasePath = trimmedBase ? `${trimmedBase}/images` : '/images';
+    const handleDismiss = () => {
+        // Drag-close/overlay-close can emit a trailing click; ignore it once.
+        suppressNextOpenRef.current = true;
+        pendingOpenDeadlineRef.current = null;
+        setSessionPopupShown(true);
+        if (!isMobile) {
+            window.open(boostingUrl, '_blank', 'noopener,noreferrer');
+            close();
+            return;
+        }
+        close();
+    };
+    const handleBoostOverlayClick = (event) => {
+        if (suppressNextOpenRef.current) {
+            event.preventDefault();
+            suppressNextOpenRef.current = false;
+            return;
+        }
+        pendingOpenDeadlineRef.current = null;
+        setSessionPopupShown(true);
+        close();
+    };
+    const contentEle = (React__default.createElement(Box, { sx: { position: 'relative' } },
+        React__default.createElement(Stack, { "data-boost-type": boostType, sx: (theme) => ({
+                gap: 12,
+                [theme.fn.largerThan('sm')]: { gap: 16 },
+                '.article-card': {
+                    // Clicks go to the boost overlay `<a>`; keep ArticleCard markup unchanged.
+                    a: {
+                        pointerEvents: 'none',
+                    },
+                    '&[data-size=md][data-direction=horizontal]': {
+                        padding: 0,
+                        '.footer': {
+                            marginTop: 0,
+                            '& > div': {
+                                marginTop: 16,
+                            },
+                        },
+                    },
+                    '&[data-direction=vertical] .banner': {
+                        height: 192,
+                    },
+                    '.author .poster': {
+                        p: {
+                            fontSize: '12px',
+                            lineHeight: '16px',
+                            'span:not(.name)': {
+                                color: '#8c8c8c',
+                            },
+                        },
+                        a: {
+                            color: '#8c8c8c',
+                            'span:not(:has(span))': {
+                                color: '#000 !important',
+                            },
+                        },
+                    },
+                    'h3 + a': {
+                        display: 'none',
+                    },
+                },
+            }) },
+            boostType === 'article' && boostArticle ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(PopupBoostArticleCard, { article: boostArticle, isMobile: isMobile, assetImageBase: assetImageBasePath }),
+                React__default.createElement(Text, { size: "p3", as: "div", dangerouslySetInnerHTML: {
+                        __html: boostArticle.excerpt || boostArticle.postContent || '',
+                    }, lineClamp: 8 }))) : null,
+            boostType === 'carepath' && boostCarePath ? (React__default.createElement(Box, { sx: {
+                    display: 'grid',
+                    gap: 12,
+                } },
+                React__default.createElement(Box, { sx: (theme) => ({
+                        marginLeft: -16,
+                        marginRight: -16,
+                        [theme.fn.largerThan('sm')]: { marginTop: -16 },
+                        width: 'calc(100% + 32px)',
+                        aspectRatio: '16 / 8',
+                        overflow: 'hidden',
+                    }) },
+                    React__default.createElement("img", { src: boostCarePath.image || '', alt: boostCarePath.title, loading: "lazy", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            display: 'block',
+                        } })),
+                React__default.createElement(Stack, { spacing: 3 },
+                    React__default.createElement(Box, { sx: {
+                            textTransform: 'uppercase',
+                            fontWeight: 'normal',
+                            fontSize: '12px',
+                            lineHeight: '15px',
+                        } }, domainLocales[locale]),
+                    React__default.createElement(Box, { sx: {
+                            fontSize: '16px',
+                            lineHeight: '19px',
+                            fontWeight: 500,
+                        } }, boostCarePath.title)),
+                !!boostCarePath.content && (React__default.createElement(Text, { size: "p3", lineClamp: 2, sx: {
+                        fontSize: '14px',
+                        lineHeight: '19px',
+                        color: '#65676B',
+                    }, dangerouslySetInnerHTML: {
+                        __html: boostCarePath.content,
+                    } })))) : null,
+            boostType === 'custom' && boostCustom ? (React__default.createElement(Box, { sx: {
+                    display: 'grid',
+                    gap: 12,
+                } },
+                boostCustom.image ? (React__default.createElement(Box, { sx: (theme) => ({
+                        marginLeft: -16,
+                        marginRight: -16,
+                        [theme.fn.largerThan('sm')]: { marginTop: -16 },
+                        width: 'calc(100% + 32px)',
+                        aspectRatio: '16 / 8',
+                        overflow: 'hidden',
+                    }) },
+                    React__default.createElement("img", { src: boostCustom.image, alt: boostCustom.title, loading: "lazy", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            display: 'block',
+                        } }))) : null,
+                React__default.createElement(Stack, { spacing: 5 },
+                    React__default.createElement(Stack, { spacing: 3 },
+                        React__default.createElement(Box, { sx: {
+                                textTransform: 'uppercase',
+                                fontWeight: 'normal',
+                                fontSize: '12px',
+                                lineHeight: '15px',
+                                color: '#65676B',
+                            } }, domainLocales[locale]),
+                        React__default.createElement(Box, { sx: {
+                                fontSize: '16px',
+                                lineHeight: '19px',
+                                fontWeight: 500,
+                            } }, boostCustom.title)),
+                    !!boostCustom.description && (React__default.createElement(Text, { size: "p3", lineClamp: 2, sx: {
+                            fontSize: '14px',
+                            lineHeight: '19px',
+                            color: '#65676B',
+                        }, dangerouslySetInnerHTML: {
+                            __html: boostCustom.description,
+                        } }))))) : null,
+            React__default.createElement(Button$1, { variant: "primary", fullWidth: true }, viewDetailText)),
+        React__default.createElement(Box, Object.assign({ component: "a", href: boostingUrl }, boostPopupTrackingData(BOOST_POPUP_TRACKING_ACTION.viewDetail, currentUrl), { target: "_blank", rel: "noopener noreferrer", "aria-label": viewDetailText, onClick: handleBoostOverlayClick, sx: {
+                position: 'absolute',
+                inset: 0,
+                zIndex: 2,
+                cursor: 'pointer',
+                backgroundColor: 'transparent',
+            } }))));
+    return isMobile ? (React__default.createElement(DrawerBottom, { isMobile: true, isOpen: opened, onClose: handleDismiss, onRelease: handleBoostDrawerRelease, drawerOverlayProps: boostPopupTrackingData(BOOST_POPUP_TRACKING_ACTION.closeCard, currentUrl) },
+        React__default.createElement(Stack, { spacing: 16, sx: { padding: 16, paddingTop: 0 } },
+            React__default.createElement(Text, { size: "s2" }, modalHeading),
+            contentEle))) : (React__default.createElement(Modal, { title: React__default.createElement(Text, { size: "s2" }, modalHeading), size: 568, opened: opened, onClose: handleDismiss, closeButtonProps: boostPopupTrackingData(BOOST_POPUP_TRACKING_ACTION.closeCard, currentUrl), overlayProps: boostPopupTrackingData(BOOST_POPUP_TRACKING_ACTION.closeCard, currentUrl), zIndex: 500, styles: {
+            body: {
+                '&:not(:only-child)': {
+                    paddingTop: 16,
+                },
+            },
+        } }, contentEle));
+}
+
 const StyledFixedAdBlock = styled.div `
   position: fixed;
   z-index: 48;
@@ -5348,7 +5983,8 @@ function CardListItem({ title, href, description, logo, defaultImage, LinkCompon
 
 const HERO_IMAGE_TO_TOP_CONTENT = 251;
 const OVERLAP_CONTENT_RADIUS = 22;
-const HERO_IMAGE_HEIGHT = OVERLAP_CONTENT_RADIUS + HERO_IMAGE_TO_TOP_CONTENT;
+const HERO_IMAGE_HEIGHT = OVERLAP_CONTENT_RADIUS + HERO_IMAGE_TO_TOP_CONTENT;
+const HERO_IMAGE_RATIO = 375 / HERO_IMAGE_HEIGHT;
 
 // import CalendarDayIcon from '@/public/svg/calendar-days.svg'
 // import UsersIcon from '@/public/svg/users.svg'
@@ -5506,7 +6142,7 @@ const StyledImageCarousel = styled(Carousel) `
 
   .mantine-Carousel-indicators {
     gap: 0.375rem;
-    bottom: ${({ isCarouselParallax }) => isCarouselParallax ? '38%' : '0.5rem'};
+    bottom: ${({ isCarouselParallax }) => isCarouselParallax ? '14.65%' : '0.5rem'};
   }
 
   .mantine-Carousel-indicator {
@@ -5562,7 +6198,8 @@ const FixedHeroSection = styled.div `
     right: 0;
     z-index: 0;
     overflow: hidden;
-    display: flex;
+    /* display: flex; */
+    display: ${({ hidden }) => (hidden ? 'none' : 'flex')};
     flex-direction: column;
 
     width: 100vw;
@@ -5570,7 +6207,7 @@ const FixedHeroSection = styled.div `
 
     & > div {
       width: 100vw;
-      height: var(--heroImageHeight);
+      height: calc(100vw / var(--heroImageRatio));
     }
   }
 `;
@@ -5597,18 +6234,21 @@ const ContentOverlayWrapperParallax = styled.div `
 function FixedParallaxHeroSection({ children }) {
     const heroSectionRef = useRef(null);
     const [scrollIndex, setScrollIndex] = useState(0);
+    const [hideHeroSection, setHideHeroSection] = useState(false);
     useEffect(() => {
         const el = heroSectionRef.current;
         if (!el)
             return;
         const checkHasReachedTop = () => {
             setScrollIndex(window.scrollY);
+            const displayHeight = window.innerWidth / HERO_IMAGE_RATIO;
+            setHideHeroSection(window.scrollY > displayHeight);
         };
         checkHasReachedTop();
         window.addEventListener('scroll', checkHasReachedTop, { passive: true });
         return () => window.removeEventListener('scroll', checkHasReachedTop);
     }, []);
-    return (React__default.createElement(FixedHeroSection, { ref: heroSectionRef, "data-section": "FixedParallaxHeroSection_FixedHeroSection", scrollIndex: scrollIndex },
+    return (React__default.createElement(FixedHeroSection, { ref: heroSectionRef, "data-section": "FixedParallaxHeroSection_FixedHeroSection", scrollIndex: scrollIndex, hidden: hideHeroSection },
         React__default.createElement("div", { "data-section": "FixedHeroSection_Content" }, children)));
 }
 function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile: isMobileProp = false, imageCarousel = [], carouselSlotProps, isCarouselParallax = false, onCarouselImageClick, }) {
@@ -5778,7 +6418,7 @@ const EmptyState = styled.div `
   min-height: 240px;
   text-align: center;
 `;
-const StyledModal = styled(Modal) `
+const StyledModal = styled(Modal$1) `
   .mantine-Modal-header {
     padding: 12px 16px;
     border-bottom: 1px solid #0000001a;
@@ -6255,4 +6895,4 @@ const formatSiteWideBanner = (sitewideBanner, type = 'home') => {
     };
 };
 
-export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, StarHalf as E, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, StarUpgrade as J, List as L, ModalGallery as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, useList as n, QuickFilterWrapLine as o, CardListItem as p, useModalGalleryContext as q, ModalGalleryProvider as r, CertificateItem as s, RatingStars as t, useListContext as u, RatingStarsInput as v, MAX_RATING as w, AnsweredByDoctor as x, formatSiteWideBanner as y, StarFull as z };
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, StarFull as E, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, StarHalf as J, StarUpgrade as K, List as L, ModalGallery as M, PopupBoostArticleCard as P, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, PopupBoostPageView as k, FixedBottomAdBlock as l, SummaryInfo as m, ListContext as n, useList as o, QuickFilterWrapLine as p, CardListItem as q, useModalGalleryContext as r, ModalGalleryProvider as s, CertificateItem as t, useListContext as u, RatingStars as v, RatingStarsInput as w, MAX_RATING as x, AnsweredByDoctor as y, formatSiteWideBanner as z };