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

package/build/{transform-bfd7a500.js → transform-e15a4a9a.js}

@@ -1,58 +1,68 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b8ed19ca.js');
+var tslib_es6 = require('./tslib.es6-23ee393d.js');
 var React = require('react');
-var index$4 = require('./index-04d733ac.js');
+var index$4 = require('./index-70f9ff0e.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$6 = require('./index-9ef87a42.js');
-require('./index-6488fa2a.js');
-var index$a = require('./index-d2f0016a.js');
-require('./index-28c0c07b.js');
-var index$2 = require('./index-8e012c2d.js');
-var index$e = require('./index-53087815.js');
-require('./index-c9fea751.js');
-require('./index.styles-5ea3e194.js');
-require('./translationsContext-63f9475c.js');
-require('@mantine/hooks');
-var utils = require('./utils-7b13808f.js');
-require('./index-a886bf9b.js');
-var SiteWideBanner = require('./SiteWideBanner-0a8bb37a.js');
+var index$6 = require('./index-189ee940.js');
+require('./index-d821c3f0.js');
+var index$a = require('./index-99834b8d.js');
+require('./index-3952067d.js');
+var index$2 = require('./index-e8b2623f.js');
+var index$g = require('./index-31cd5a23.js');
+var index$e = require('./index-7b1fabeb.js');
+require('./index.styles-cb786859.js');
+require('./translationsContext-f7171033.js');
+var hooks = require('@mantine/hooks');
+var utils = require('./utils-5d61c1bc.js');
+require('./index-135df1f0.js');
+var SiteWideBanner = require('./SiteWideBanner-72a3cdcc.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$3 = require('./index-f739830c.js');
+var index$3 = require('./index-9e6f849f.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
-var index$5 = require('./index-87c41679.js');
+var index$5 = require('./index-ae63284b.js');
 var throttle = require('lodash/throttle');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var useOutsideClick = require('./useOutsideClick-830d0ef0.js');
+var useOutsideClick = require('./useOutsideClick-742ba261.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$9 = require('./index-c2f9216c.js');
-var index$7 = require('./index-2031ac01.js');
-var index$8 = require('./index-f4b3f00b.js');
+var index$9 = require('./index-64c64404.js');
+var index$7 = require('./index-b41e8a8e.js');
+var index$8 = require('./index-60792db5.js');
 var classNames = require('classnames');
-var index$b = require('./index-650dd3c0.js');
+var index$b = require('./index-e6af4610.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$d = require('./index-373bf93c.js');
-var index$c = require('./index-dff724c3.js');
+var index$d = require('./index-8d03d824.js');
+var index$c = require('./index-971b2cdb.js');
+var index$h = require('./index-823b9326.js');
+var index$i = require('./index-a1321425.js');
+var dataTransform = require('./dataTransform-90042446.js');
+var togetherApiPaths = require('./togetherApiPaths.js');
+var togetherComponentGlobalContext = require('./utils-63a88554.js');
+var innertext = require('innertext');
+var Locale = require('./Locale-76638afe.js');
+var index$f = require('./index-f7de0729.js');
+var constants = require('./constants-362d1299.js');
+var dayjs = require('dayjs');
+var moleculesArticleCard = require('./moleculesArticleCard.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-43df1985.js');
 var arrow = require('@hhgtech/icons/arrow');
 var other = require('@hhgtech/icons/other');
 var Lottie = require('lottie-light-react');
-var index$f = require('./index-c9f8f9a4.js');
-var index$g = require('./index-8cf17774.js');
+var index$j = require('./index-f5c98be1.js');
+var index$k = require('./index-93ec4fbc.js');
 var get = require('lodash/get');
 var debounce = require('lodash/debounce');
-var Close = require('./Close-481b1188.js');
+var index$l = require('./index-11131b6a.js');
 var carousel = require('@mantine/carousel');
-var constants = require('./constants-41d2f9b3.js');
+var constants$1 = require('./constants-e17e808f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -84,6 +94,8 @@ var id__default = /*#__PURE__*/_interopDefault(id);
 var vi__default = /*#__PURE__*/_interopDefault(vi);
 var zhTW__default = /*#__PURE__*/_interopDefault(zhTW);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var innertext__default = /*#__PURE__*/_interopDefault(innertext);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
 var get__default = /*#__PURE__*/_interopDefault(get);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
@@ -2825,6 +2837,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 } = index$8.useTranslations();
+    const theme = core.useMantineTheme();
+    const formatOptionsComp = React.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__namespace["default"].createElement(Comp, Object.assign({}, propsComp));
+    }, []);
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, index$8.format(t(intlKey), {
+        author_name: (React__namespace["default"].createElement("span", { style: {
+                fontWeight: index$e.FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, author_name), formatOptionsPropsAuthorName)))),
+        expert_display_name: (React__namespace["default"].createElement("span", { style: {
+                fontWeight: index$e.FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, expert_display_name), formatOptionsPropsExpertDisplayName)))),
+        fact_check_display_name: (React__namespace["default"].createElement("span", { style: {
+                fontWeight: index$e.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__default["default"](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(index$6.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__default["default"].div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  img {
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+`;
+styled__default["default"].div `
+  width: 12px;
+  height: 12px;
+`;
+const StyledArticleCard = styled__default["default"](moleculesArticleCard.ArticleCard) `
+  .author .poster p span:not(.author-name) {
+    font-weight: 400;
+  }
+
+  .author .poster p span:not(.name) {
+    color: ${miscTheme.theme.colors.gray800};
+  }
+
+  .author-name {
+    font-weight: 600;
+  }
+`;
+const StyledItemImageContain = styled__default["default"].div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
+
+function renderBoostUploadTime(locale, date) {
+    if (!date)
+        return '';
+    if (dayjs__default["default"](date, constants.POST_DATE_FORMAT).isValid()) {
+        return dayjs__default["default"](date, constants.POST_DATE_FORMAT).format(index$6.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 } = index$8.useTranslations();
+    const locale = translationsLocale === 'vi-VN_MB'
+        ? Locale.LOCALE.Vietnam
+        : translationsLocale;
+    const authorV2 = getAuthorForBoostCard({
+        article,
+        locale,
+        assetImageBase,
+        version: 'short',
+    });
+    const authorUrlDomain = authorV2.avatar_permalink
+        ? `${index$f.getHelloSitesUrl(translationsLocale, true)}${authorV2.avatar_permalink}`
+        : '';
+    const domain = constantsDomainLocales.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__namespace["default"].createElement(StyledAvatarReviewer, null,
+        React__namespace["default"].createElement(StyledItemImageContain, null,
+            React__namespace["default"].createElement("img", { className: "avatar", src: authorV2.avatar || constants.DEFAULT_AVATAR_IMG, alt: authorV2.avatar_alt, width: 24, height: 24, style: {
+                    borderRadius: '50%',
+                    objectFit: 'cover',
+                    display: 'block',
+                } }))));
+    return (React__namespace["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__namespace["default"].createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
+                article.featureImage ||
+                constants.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__default["default"](article.postTitle || article.postName || '') || '', text: article.excerpt || article.description || article.postContent
+            ? innertext__default["default"](article.excerpt ||
+                article.description ||
+                ((_m = article.postContent) === null || _m === void 0 ? void 0 : _m.split('\r\n')[0]) ||
+                '')
+            : '', avatarImg: authorV2.avatar_permalink ? (React__namespace["default"].createElement("a", { href: authorV2.avatar_permalink, className: "pointer-event-child-none", "data-event-label": authorUrlDomain }, avatarInner)) : (React__namespace["default"].createElement("span", { className: "pointer-event-child-none" }, avatarInner)), authorName: React__namespace["default"].createElement("span", { "data-event-label": authorUrlDomain, className: "pointer-event-child-none" },
+            React__namespace["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 } = index$8.useTranslations();
+    const modalHeading = t('popupBoostPageView.modalHeading');
+    const viewDetailText = t('popupBoostPageView.viewDetail');
+    const [requestState, setRequestState] = React.useState('idle');
+    const [boostType, setBoostType] = React.useState(null);
+    const [boostArticle, setBoostArticle] = React.useState(null);
+    const [boostCarePath, setBoostCarePath] = React.useState(null);
+    const [boostCustom, setBoostCustom] = React.useState(null);
+    const [delaySeconds, setDelaySeconds] = React.useState(0);
+    const [sessionPopupShown, setSessionPopupShown] = React.useState(false);
+    const [opened, { open, close }] = hooks.useDisclosure(false);
+    const pendingOpenDeadlineRef = React.useRef(null);
+    const suppressNextOpenRef = React.useRef(false);
+    const getSpotlightTitleRef = React.useRef(getSpotlightTitle);
+    const getSpotlightImageRef = React.useRef(getSpotlightImage);
+    const getSpotlightPermalinkRef = React.useRef(getSpotlightPermalink);
+    const getSpotlightContentRef = React.useRef(getSpotlightContent);
+    getSpotlightTitleRef.current = getSpotlightTitle;
+    getSpotlightImageRef.current = getSpotlightImage;
+    getSpotlightPermalinkRef.current = getSpotlightPermalink;
+    getSpotlightContentRef.current = getSpotlightContent;
+    const currentUrlRef = React.useRef(currentUrl);
+    currentUrlRef.current = currentUrl;
+    const hasSourceId = source === 'article' ? !!articleId : !!postId;
+    React.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');
+        (() => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getDiscoverApiPath(togetherApiPaths.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(dataTransform.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,
+    ]);
+    React.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 = React.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__namespace["default"].createElement(core.Box, { sx: { position: 'relative' } },
+        React__namespace["default"].createElement(core.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__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+                React__namespace["default"].createElement(PopupBoostArticleCard, { article: boostArticle, isMobile: isMobile, assetImageBase: assetImageBasePath }),
+                React__namespace["default"].createElement(index$2.Text, { size: "p3", as: "div", dangerouslySetInnerHTML: {
+                        __html: boostArticle.excerpt || boostArticle.postContent || '',
+                    }, lineClamp: 8 }))) : null,
+            boostType === 'carepath' && boostCarePath ? (React__namespace["default"].createElement(core.Box, { sx: {
+                    display: 'grid',
+                    gap: 12,
+                } },
+                React__namespace["default"].createElement(core.Box, { sx: (theme) => ({
+                        marginLeft: -16,
+                        marginRight: -16,
+                        [theme.fn.largerThan('sm')]: { marginTop: -16 },
+                        width: 'calc(100% + 32px)',
+                        aspectRatio: '16 / 8',
+                        overflow: 'hidden',
+                    }) },
+                    React__namespace["default"].createElement("img", { src: boostCarePath.image || '', alt: boostCarePath.title, loading: "lazy", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            display: 'block',
+                        } })),
+                React__namespace["default"].createElement(core.Stack, { spacing: 3 },
+                    React__namespace["default"].createElement(core.Box, { sx: {
+                            textTransform: 'uppercase',
+                            fontWeight: 'normal',
+                            fontSize: '12px',
+                            lineHeight: '15px',
+                        } }, constantsDomainLocales.domainLocales[locale]),
+                    React__namespace["default"].createElement(core.Box, { sx: {
+                            fontSize: '16px',
+                            lineHeight: '19px',
+                            fontWeight: 500,
+                        } }, boostCarePath.title)),
+                !!boostCarePath.content && (React__namespace["default"].createElement(index$2.Text, { size: "p3", lineClamp: 2, sx: {
+                        fontSize: '14px',
+                        lineHeight: '19px',
+                        color: '#65676B',
+                    }, dangerouslySetInnerHTML: {
+                        __html: boostCarePath.content,
+                    } })))) : null,
+            boostType === 'custom' && boostCustom ? (React__namespace["default"].createElement(core.Box, { sx: {
+                    display: 'grid',
+                    gap: 12,
+                } },
+                boostCustom.image ? (React__namespace["default"].createElement(core.Box, { sx: (theme) => ({
+                        marginLeft: -16,
+                        marginRight: -16,
+                        [theme.fn.largerThan('sm')]: { marginTop: -16 },
+                        width: 'calc(100% + 32px)',
+                        aspectRatio: '16 / 8',
+                        overflow: 'hidden',
+                    }) },
+                    React__namespace["default"].createElement("img", { src: boostCustom.image, alt: boostCustom.title, loading: "lazy", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            display: 'block',
+                        } }))) : null,
+                React__namespace["default"].createElement(core.Stack, { spacing: 5 },
+                    React__namespace["default"].createElement(core.Stack, { spacing: 3 },
+                        React__namespace["default"].createElement(core.Box, { sx: {
+                                textTransform: 'uppercase',
+                                fontWeight: 'normal',
+                                fontSize: '12px',
+                                lineHeight: '15px',
+                                color: '#65676B',
+                            } }, constantsDomainLocales.domainLocales[locale]),
+                        React__namespace["default"].createElement(core.Box, { sx: {
+                                fontSize: '16px',
+                                lineHeight: '19px',
+                                fontWeight: 500,
+                            } }, boostCustom.title)),
+                    !!boostCustom.description && (React__namespace["default"].createElement(index$2.Text, { size: "p3", lineClamp: 2, sx: {
+                            fontSize: '14px',
+                            lineHeight: '19px',
+                            color: '#65676B',
+                        }, dangerouslySetInnerHTML: {
+                            __html: boostCustom.description,
+                        } }))))) : null,
+            React__namespace["default"].createElement(index$g.Button, { variant: "primary", fullWidth: true }, viewDetailText)),
+        React__namespace["default"].createElement(core.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__namespace["default"].createElement(index$h.DrawerBottom, { isMobile: true, isOpen: opened, onClose: handleDismiss, onRelease: handleBoostDrawerRelease, drawerOverlayProps: boostPopupTrackingData(BOOST_POPUP_TRACKING_ACTION.closeCard, currentUrl) },
+        React__namespace["default"].createElement(core.Stack, { spacing: 16, sx: { padding: 16, paddingTop: 0 } },
+            React__namespace["default"].createElement(index$2.Text, { size: "s2" }, modalHeading),
+            contentEle))) : (React__namespace["default"].createElement(index$i.Modal, { title: React__namespace["default"].createElement(index$2.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__default["default"].div `
   position: fixed;
   z-index: 48;
@@ -4701,7 +5338,7 @@ const WidgetChatbotAi = ({}) => {
             React__namespace["default"].createElement("form", { onSubmit: handleSubmit },
                 React__namespace["default"].createElement(StyleInput, { type: "text", value: value, onChange: (e) => setValue(e.target.value), name: "input-message", placeholder: "Ask anything..." }),
                 React__namespace["default"].createElement(core.Box, { className: "rightSection" },
-                    React__namespace["default"].createElement(index$e.Button, { className: "submitBtn", type: "submit", variant: value ? 'primary' : 'ghost', leftIcon: React__namespace["default"].createElement(arrow.ArrowRight, { size: 16, color: value ? '#fff' : '#595959' }) }))))));
+                    React__namespace["default"].createElement(index$g.Button, { className: "submitBtn", type: "submit", variant: value ? 'primary' : 'ghost', leftIcon: React__namespace["default"].createElement(arrow.ArrowRight, { size: 16, color: value ? '#fff' : '#595959' }) }))))));
 };
 
 const StyledBox = styled__default["default"].div `
@@ -4814,7 +5451,7 @@ const HPVScreener = ({ onClick, className, style, image, as = 'span', }) => {
             React__namespace["default"].createElement(index$9.Button, { className: "hpv-screener-button", onClick: onClick, size: "lg", color: "secondary" },
                 React__namespace["default"].createElement(StyledTextButtonBox, null,
                     React__namespace["default"].createElement(index$2.Text, { size: "title2", color: "primaryBase", weight: "semiBold" }, t('detail.hpvScreenerButton')),
-                    React__namespace["default"].createElement(index$f.ArrowRightBlue, { style: { width: '0.5rem', height: '0.5rem' } }))))));
+                    React__namespace["default"].createElement(index$j.ArrowRightBlue, { style: { width: '0.5rem', height: '0.5rem' } }))))));
 };
 
 const StyledTwoItemHorizontalContainer = styled__default["default"].div `
@@ -4917,7 +5554,7 @@ function Content({ className, children, customLoading, customEmpty, }) {
     const { loading, items } = useListContext();
     const { t } = index$8.useTranslations();
     if (loading) {
-        return customLoading ? React__namespace["default"].createElement(React__namespace["default"].Fragment, null, customLoading) : React__namespace["default"].createElement(index$g.Loading, null);
+        return customLoading ? React__namespace["default"].createElement(React__namespace["default"].Fragment, null, customLoading) : React__namespace["default"].createElement(index$k.Loading, null);
     }
     if (!items.length) {
         return customEmpty ? React__namespace["default"].createElement(React__namespace["default"].Fragment, null, customEmpty) : React__namespace["default"].createElement("div", null, t('common.noResult'));
@@ -5383,7 +6020,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'
@@ -5541,7 +6179,7 @@ const StyledImageCarousel = styled__default["default"](index$4.Carousel) `
 
   .mantine-Carousel-indicators {
     gap: 0.375rem;
-    bottom: ${({ isCarouselParallax }) => isCarouselParallax ? '38%' : '0.5rem'};
+    bottom: ${({ isCarouselParallax }) => isCarouselParallax ? '14.65%' : '0.5rem'};
   }
 
   .mantine-Carousel-indicator {
@@ -5592,12 +6230,13 @@ const FixedHeroSection = styled__default["default"].div `
 
   ${utils.MediaQueries.mbDown} {
     position: fixed;
-    top: var(--header-height, ${constants.DEFAULT_HEADER_HEIGHT_MOBILE}px);
+    top: var(--header-height, ${constants$1.DEFAULT_HEADER_HEIGHT_MOBILE}px);
     left: 0;
     right: 0;
     z-index: 0;
     overflow: hidden;
-    display: flex;
+    /* display: flex; */
+    display: ${({ hidden }) => (hidden ? 'none' : 'flex')};
     flex-direction: column;
 
     width: 100vw;
@@ -5605,7 +6244,7 @@ const FixedHeroSection = styled__default["default"].div `
 
     & > div {
       width: 100vw;
-      height: var(--heroImageHeight);
+      height: calc(100vw / var(--heroImageRatio));
     }
   }
 `;
@@ -5632,18 +6271,21 @@ const ContentOverlayWrapperParallax = styled__default["default"].div `
 function FixedParallaxHeroSection({ children }) {
     const heroSectionRef = React.useRef(null);
     const [scrollIndex, setScrollIndex] = React.useState(0);
+    const [hideHeroSection, setHideHeroSection] = React.useState(false);
     React.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__namespace["default"].createElement(FixedHeroSection, { ref: heroSectionRef, "data-section": "FixedParallaxHeroSection_FixedHeroSection", scrollIndex: scrollIndex },
+    return (React__namespace["default"].createElement(FixedHeroSection, { ref: heroSectionRef, "data-section": "FixedParallaxHeroSection_FixedHeroSection", scrollIndex: scrollIndex, hidden: hideHeroSection },
         React__namespace["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, }) {
@@ -6061,7 +6703,7 @@ function ModalGallery({ generalInfo, imageCarousel = [], backupSrc, isMobile = f
     };
     const modalTitle = isMobile ? title : undefined;
     return (React__namespace["default"].createElement(StyledModal, Object.assign({ opened: isOpen, onClose: handleClose, zIndex: index$6.ZINDEX_SSO, withCloseButton: isMobile, centered: true, size: "auto", fullScreen: isMobile, title: modalTitle, autoFocus: false }, modalProps, { transitionProps: Object.assign({ duration: TRANSITION_DURATION }, modalProps.transitionProps) }),
-        !isMobile && (React__namespace["default"].createElement(Close.Close, { onClick: handleClose, className: "closeModal", width: 24, height: 24, fill: "#212121" })),
+        !isMobile && (React__namespace["default"].createElement(index$l.Close, { onClick: handleClose, className: "closeModal", width: 24, height: 24, fill: "#212121" })),
         React__namespace["default"].createElement(ModalGalleryProvider, { generalInfo: generalInfo, imageCarousel: imageCarousel, backupSrc: backupSrc, initialSlide: initialSlide, isMobile: isMobile },
             React__namespace["default"].createElement(ModalGalleryContent, null))));
 }
@@ -6311,6 +6953,8 @@ exports.ListContext = ListContext;
 exports.MAX_RATING = MAX_RATING;
 exports.ModalGallery = ModalGallery;
 exports.ModalGalleryProvider = ModalGalleryProvider;
+exports.PopupBoostArticleCard = PopupBoostArticleCard;
+exports.PopupBoostPageView = PopupBoostPageView;
 exports.QuickFilter = QuickFilter;
 exports.QuickFilterWrapLine = QuickFilterWrapLine;
 exports.RadioGroup = RadioGroup;