@hhgtech/hhg-components 1.29.551 → 1.29.553-beta-1

package/build/{index-d38b438c.js → index-4667dd69.js}

@@ -1,57 +1,57 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-efb072e2.js');
+var tslib_es6 = require('./tslib.es6-6cb17239.js');
 var React = require('react');
-var SiteWideBanner = require('./SiteWideBanner-27e55ff9.js');
-var index = require('./index-de050cc2.js');
-var normalizeLink = require('./normalizeLink-7e40097f.js');
-var dataTransform = require('./dataTransform-94193dad.js');
+var SiteWideBanner = require('./SiteWideBanner-8d7d0b18.js');
+var index = require('./index-22fe3d5a.js');
+var normalizeLink = require('./normalizeLink-26912d83.js');
+var dataTransform = require('./dataTransform-873b4b04.js');
 var core = require('@hhgtech/icons/core');
-var index$1 = require('./index-f6f51afc.js');
-require('./translationsContext-58fd12e9.js');
-var Locale = require('./Locale-62760427.js');
+var index$1 = require('./index-b28773db.js');
+require('./translationsContext-74bb550e.js');
+var Locale = require('./Locale-d6ba560e.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var navigationProfileButton = require('./index-4a0d05f3.js');
+var navigationProfileButton = require('./index-7e7647e7.js');
 var other = require('@hhgtech/icons/other');
 var core$1 = require('@mantine/core');
-var index$c = require('./index-c72962e1.js');
+var index$c = require('./index-d0545176.js');
 var throttle = require('lodash/throttle');
 require('@mantine/dates');
-var index$b = require('./index-ecd739a8.js');
-var index$6 = require('./index-fd2a8ce6.js');
-require('./index-526f4e9a.js');
-var index$4 = require('./index-5584a515.js');
-var index$3 = require('./index-ba888211.js');
-require('./index-cfa6e63c.js');
-require('./index.styles-f0004ce9.js');
+var index$b = require('./index-fb86e052.js');
+var index$6 = require('./index-d3376931.js');
+require('./index-27fcb417.js');
+var index$4 = require('./index-9eed5876.js');
+var index$3 = require('./index-3db7c101.js');
+require('./index-54b3b98d.js');
+require('./index.styles-e2ab41b3.js');
 require('@mantine/hooks');
-var utils = require('./utils-62a8a766.js');
-require('./index-2cad548d.js');
-var constants = require('./constants-15b603cf.js');
-var store = require('./store-24c1e9c2.js');
-var constants$3 = require('./constants-d1cfb0a0.js');
-var index$5 = require('./index-6d81edfb.js');
-var index$2 = require('./index-b090a394.js');
-var useCartCareService = require('./useCartCareService-6f725d06.js');
-var constants$1 = require('./constants-d68c31bf.js');
+var utils = require('./utils-93c6c56f.js');
+require('./index-ad712336.js');
+var constants = require('./constants-7f617d94.js');
+var store = require('./store-bdc5e3fc.js');
+var constants$3 = require('./constants-10a56219.js');
+var index$5 = require('./index-aa9bc62d.js');
+var index$2 = require('./index-d75b0fd2.js');
+var useCartCareService = require('./useCartCareService-68e3e639.js');
+var constants$1 = require('./constants-c2745cea.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-var index$7 = require('./index-16102e73.js');
-var index$8 = require('./index-4f99f0e2.js');
-var utils$1 = require('./utils-38cae2df.js');
-var index$9 = require('./index-52917032.js');
-var useResolvedCaptureUrls = require('./useResolvedCaptureUrls-d0250c41.js');
+var index$7 = require('./index-da7a8713.js');
+var index$8 = require('./index-bd4eebf3.js');
+var utils$1 = require('./utils-b3af0403.js');
+var index$9 = require('./index-6f4cd31f.js');
+var useResolvedCaptureUrls = require('./useResolvedCaptureUrls-117f6490.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$a = require('./index-21405f49.js');
+var index$a = require('./index-e7c9ca25.js');
 var get = require('lodash/get');
-var constants$2 = require('./constants-2b5a4e0f.js');
+var constants$2 = require('./constants-60f8b447.js');
 var isEmpty = require('lodash/isEmpty');
-var index$d = require('./index-8eb26c3b.js');
+var index$d = require('./index-35d7bb95.js');
 var debounce = require('lodash/debounce');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var core$2 = require('./core-39902442.js');
+var core$2 = require('./core-bb7439d7.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -1842,7 +1842,7 @@ const VideoSpotlights = ({ spotlightsList = [], layout = 'default', }) => {
     const helloWellnessVideoMenu = (_c = (_b = (_a = ssrMenuContent === null || ssrMenuContent === void 0 ? void 0 : ssrMenuContent.helloWellness) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.menu) === null || _c === void 0 ? void 0 : _c.videoMenu;
     return (React__namespace["default"].createElement(Spotlights, { title: t('home.navigator.menu.lastestVideos') }, spotlightsList.length !== 0 ? (React__namespace["default"].createElement(StyledContainerItems$1, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((video, index) => {
         const isHelloWellness = isHelloWellnessVideo(video, helloWellnessVideoMenu === null || helloWellnessVideoMenu === void 0 ? void 0 : helloWellnessVideoMenu.videoUrl, helloWellnessVideoMenu === null || helloWellnessVideoMenu === void 0 ? void 0 : helloWellnessVideoMenu.thumbnail);
-        return (React__namespace["default"].createElement(SiteWideBanner.VideoItem, { key: index, data: Object.assign(Object.assign({}, video), { type: index$b.VideoType.SHORTS }), layout: layout === 'default' ? 'overlay' : 'horizon', dataEventCategory: "Hamburger Navigation", dataEventAction: isHelloWellness
+        return (React__namespace["default"].createElement(SiteWideBanner.VideoItem, { key: index, data: Object.assign(Object.assign({}, video), { type: index$b.VideoType.SHORTS }), forceTypeModal: index$b.VideoType.SHORTS, layout: layout === 'default' ? 'overlay' : 'horizon', dataEventCategory: "Hamburger Navigation", dataEventAction: isHelloWellness
                 ? 'Click to Pin Video'
                 : `Video Click ${index + 1}`, dataEventLabel: isHelloWellness ? video.url : undefined }));
     }))) : (React__namespace["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.category.noDatas.title'), description: t('home.navigator.menu.category.noDatas.description'), link: `${statics.VIDEO_URL_FE}/`, cta: t('home.navigator.menu.category.noDatas.cta'), icon: index$6.CommonGAssets.getAssetPath('Spotlight.svg') }))));
@@ -2789,12 +2789,291 @@ const NavigationMenu = ({ menuItems, originalMenuItems, className, }) => {
         React__namespace["default"].createElement(StyledWrapMenuItems, { "data-site-type": siteType }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map((menuItem, index) => (React__namespace["default"].createElement(ItemMenu, { key: index, item: menuItem, menu: menuItem.popupType === 'categories' ? (React__namespace["default"].createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights })) : menuItem.popupType === 'tools' ? (React__namespace["default"].createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights })) : menuItem.popupType === 'together' ? (React__namespace["default"].createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights })) : menuItem.popupType === 'care' ? (React__namespace["default"].createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights })) : menuItem.popupType === 'video' ? (React__namespace["default"].createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights })) : menuItem.popupType === 'other' ? (React__namespace["default"].createElement(MenuViewMore, { menuItems: originalMenuItems })) : null }))))));
 };
 
+const normalizeApiString = (value) => {
+    if (typeof value !== 'string')
+        return '';
+    return value.trim();
+};
+const VALID_CTA_BANNER_LAYOUTS = [
+    'image_overlay_button',
+    'image_on_top_button_below',
+];
+const VALID_CTA_BANNER_GRIDS = [
+    'layout_1_block',
+    'layout_2_block',
+    'layout_3_block',
+    'layout_4_block',
+];
+const DEFAULT_CTA_BANNER_LAYOUT = 'image_on_top_button_below';
+const DEFAULT_CTA_BANNER_GRID = 'layout_4_block';
+const resolveCtaBannerLayoutFromApi = (apiLayout, apiGridLayout) => {
+    const rawLayout = (apiLayout !== null && apiLayout !== void 0 ? apiLayout : '').trim();
+    const rawGridLayout = (apiGridLayout !== null && apiGridLayout !== void 0 ? apiGridLayout : '').trim();
+    const isDisplayLayout = VALID_CTA_BANNER_LAYOUTS.includes(rawLayout);
+    const layout = isDisplayLayout
+        ? rawLayout
+        : DEFAULT_CTA_BANNER_LAYOUT;
+    const rawGrid = rawGridLayout || (!isDisplayLayout ? rawLayout : '');
+    const gridLayout = VALID_CTA_BANNER_GRIDS.includes(rawGrid)
+        ? rawGrid
+        : DEFAULT_CTA_BANNER_GRID;
+    return { layout, gridLayout };
+};
+const formatCommonProps = (data) => {
+    const hashtagProp = data.hashtag || '';
+    const hashtag = hashtagProp.startsWith('#')
+        ? hashtagProp.substring(1)
+        : hashtagProp;
+    const idScroll = data.id_scroll || '';
+    return {
+        wrapperProps: {
+            title: data.title || '',
+            description: data.description || '',
+            icon: typeof data.icon === 'string' ? data.icon : '',
+            bgColor: data.background_color || '',
+        },
+        sessionLayout: data.session_layout || '',
+        idScroll: hashtag ? idScroll : idScroll.toLowerCase(),
+        title: data.title || '',
+        description: data.description || '',
+        icon: typeof data.icon === 'string' ? data.icon : '',
+        hashtag: encodeURIComponent(hashtag),
+        backgroundColor: data.background_color || '',
+    };
+};
+const isCtaBannerMultiplePopupMode = (setting) => setting === 'include-popup';
+const formatCtaBannerPopupActionButton = (button, buttonStyle) => {
+    var _a, _b, _c, _d, _e, _f;
+    const title = (_b = (_a = button === null || button === void 0 ? void 0 : button.button_name) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+    const url = (_d = (_c = button === null || button === void 0 ? void 0 : button.button_link) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
+    if (!title && !url) {
+        return undefined;
+    }
+    return {
+        backgroundColor: (_e = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.backgroundColor) !== null && _e !== void 0 ? _e : '',
+        backgroundGradient: (_f = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.backgroundGradient) !== null && _f !== void 0 ? _f : '',
+        title,
+        url,
+        openNewTab: Boolean(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.openNewTab),
+    };
+};
+const formatCtaBannerNestedPopupSetting = (popupSetting, fallbackDescriptionColour, buttonStyle) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const isBackgroundImage = popupSetting.background_style === 'background-image';
+    const isBackgroundColor = popupSetting.background_style === 'background-color';
+    const popupSecondaryButton = formatCtaBannerPopupActionButton((_a = popupSetting.popup_buttons) === null || _a === void 0 ? void 0 : _a.first_button, buttonStyle);
+    const popupPrimaryButton = formatCtaBannerPopupActionButton((_b = popupSetting.popup_buttons) === null || _b === void 0 ? void 0 : _b.second_button, buttonStyle);
+    return Object.assign(Object.assign(Object.assign({ title: (_c = popupSetting.title) !== null && _c !== void 0 ? _c : '', titleColour: (_d = popupSetting.title_colour) !== null && _d !== void 0 ? _d : '', description: (_e = popupSetting.description) !== null && _e !== void 0 ? _e : '', descriptionColour: (_f = popupSetting.description_colour) !== null && _f !== void 0 ? _f : fallbackDescriptionColour, buttonColour: (_g = popupSetting.button_colour) !== null && _g !== void 0 ? _g : '', gradientButton: (_h = popupSetting.gradient_button) !== null && _h !== void 0 ? _h : '', backgroundStyle: (_j = popupSetting.background_style) !== null && _j !== void 0 ? _j : '', desktop: '', mobile: '' }, (isBackgroundColor && {
+        backgroundColour: (_k = popupSetting.background_colour) !== null && _k !== void 0 ? _k : '',
+        icon: normalizeApiString(popupSetting.icon),
+    })), (isBackgroundImage && {
+        imageDesktop: normalizeApiString(popupSetting.image_desktop),
+        imageMobile: normalizeApiString(popupSetting.image_mobile),
+    })), ((popupSecondaryButton || popupPrimaryButton) && {
+        buttons: Object.assign(Object.assign({}, (popupSecondaryButton && { secondary: popupSecondaryButton })), (popupPrimaryButton && { primary: popupPrimaryButton })),
+    }));
+};
+const formatCTABannerTypeSingleSession = (data) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    if (!data) {
+        return {
+            type: 'single-image',
+            layout: 'image_overlay_content',
+            layoutPosition: 'left_banner',
+            fixSizeBanner: false,
+            listing: [],
+        };
+    }
+    const { cta_banner_type, layout, fix_size_banner, desktop_banner, mobile_banner, content_setting, popup_setting, advanced_settings, popup_display_button, } = data;
+    const defaultDescriptionColour = (_b = (_a = content_setting === null || content_setting === void 0 ? void 0 : content_setting.text) === null || _a === void 0 ? void 0 : _a.text_color) !== null && _b !== void 0 ? _b : '';
+    const header = content_setting === null || content_setting === void 0 ? void 0 : content_setting.header;
+    const text = content_setting === null || content_setting === void 0 ? void 0 : content_setting.text;
+    const buttons = content_setting === null || content_setting === void 0 ? void 0 : content_setting.buttons;
+    const primaryButton = buttons === null || buttons === void 0 ? void 0 : buttons.primary;
+    const secondaryButton = buttons === null || buttons === void 0 ? void 0 : buttons.secondary_button;
+    const buttonStyle = {
+        backgroundColor: (_c = buttons === null || buttons === void 0 ? void 0 : buttons.button_color) !== null && _c !== void 0 ? _c : '',
+        backgroundGradient: (_d = buttons === null || buttons === void 0 ? void 0 : buttons.gradient_button) !== null && _d !== void 0 ? _d : '',
+        openNewTab: Boolean(buttons === null || buttons === void 0 ? void 0 : buttons.open_new_tab),
+    };
+    const sharedPopupSetting = popup_setting
+        ? formatCtaBannerNestedPopupSetting(popup_setting, defaultDescriptionColour, buttonStyle)
+        : undefined;
+    const listing = [
+        {
+            banners: [
+                {
+                    desktop: normalizeApiString(desktop_banner),
+                    mobile: normalizeApiString(mobile_banner),
+                    titleColor: (_e = header === null || header === void 0 ? void 0 : header.text_color) !== null && _e !== void 0 ? _e : '',
+                    title: (_f = header === null || header === void 0 ? void 0 : header.header_content) !== null && _f !== void 0 ? _f : '',
+                    descriptionColor: (_g = text === null || text === void 0 ? void 0 : text.text_color) !== null && _g !== void 0 ? _g : '',
+                    description: (_h = text === null || text === void 0 ? void 0 : text.text_content) !== null && _h !== void 0 ? _h : '',
+                    buttons: {
+                        primary: {
+                            backgroundColor: buttonStyle.backgroundColor,
+                            backgroundGradient: buttonStyle.backgroundGradient,
+                            title: (_j = primaryButton === null || primaryButton === void 0 ? void 0 : primaryButton.button_name) !== null && _j !== void 0 ? _j : '',
+                            url: (_k = primaryButton === null || primaryButton === void 0 ? void 0 : primaryButton.button_link) !== null && _k !== void 0 ? _k : '',
+                            openNewTab: buttonStyle.openNewTab,
+                        },
+                        secondary: {
+                            backgroundColor: buttonStyle.backgroundColor,
+                            backgroundGradient: buttonStyle.backgroundGradient,
+                            title: (_l = secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.button_name) !== null && _l !== void 0 ? _l : '',
+                            url: (_m = secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.button_link) !== null && _m !== void 0 ? _m : '',
+                            openNewTab: buttonStyle.openNewTab,
+                        },
+                    },
+                },
+            ],
+        },
+    ];
+    return Object.assign(Object.assign(Object.assign({ type: cta_banner_type !== null && cta_banner_type !== void 0 ? cta_banner_type : 'single-image', layout: layout !== null && layout !== void 0 ? layout : 'image_overlay_content', layoutPosition: (_o = content_setting === null || content_setting === void 0 ? void 0 : content_setting.position) !== null && _o !== void 0 ? _o : 'left_banner', fixSizeBanner: Boolean(fix_size_banner), listing }, (sharedPopupSetting && Object.assign({ popupSetting: sharedPopupSetting }, (sharedPopupSetting.buttons && {
+        popupButtons: sharedPopupSetting.buttons,
+    })))), (advanced_settings && { advancedSettings: advanced_settings })), (popup_display_button && { popupDisplayButton: popup_display_button }));
+};
+const formatCTABannerTypeMultiSession = (data) => {
+    var _a, _b, _c, _d;
+    if (!data) {
+        return {
+            type: 'multiple-image',
+            layout: 'image_overlay_button',
+            gridLayout: 'layout_4_block',
+            shortReelLayout: false,
+            fixSizeBanner: false,
+            applyCarousel: false,
+            layoutKeyPillars: false,
+            expandAllCategories: false,
+            listing: [],
+        };
+    }
+    const { cta_banner_type, layout_key_pillars, layout, video_layout, short_reel_layout, fix_size_banner, apply_carousel, expand_all_categories, list_banners, color_list_banner, open_new_tab, popup_setting, advanced_settings, } = data;
+    const layoutKeyPillars = Boolean(layout_key_pillars);
+    const { layout: resolvedLayout, gridLayout } = resolveCtaBannerLayoutFromApi(layout, video_layout);
+    const defaultColor = {
+        title: (_a = color_list_banner === null || color_list_banner === void 0 ? void 0 : color_list_banner.title_color) !== null && _a !== void 0 ? _a : '',
+        description: (_b = color_list_banner === null || color_list_banner === void 0 ? void 0 : color_list_banner.description_color) !== null && _b !== void 0 ? _b : '',
+        button: (_c = color_list_banner === null || color_list_banner === void 0 ? void 0 : color_list_banner.button_color) !== null && _c !== void 0 ? _c : '',
+        gradient: (_d = color_list_banner === null || color_list_banner === void 0 ? void 0 : color_list_banner.gradient_button) !== null && _d !== void 0 ? _d : '',
+    };
+    const sharedPopupSetting = popup_setting
+        ? formatCtaBannerNestedPopupSetting(popup_setting, defaultColor.description)
+        : undefined;
+    const isSessionPopupMode = Boolean(sharedPopupSetting) &&
+        isCtaBannerMultiplePopupMode(advanced_settings);
+    const listingByLayout = layoutKeyPillars
+        ? list_banners !== null && list_banners !== void 0 ? list_banners : []
+        : [{ banners: list_banners }];
+    const listing = listingByLayout.map((groupBanner) => {
+        var _a, _b;
+        const isKeyPillar = layoutKeyPillars && 'key_pillars' in groupBanner;
+        const keyPillarData = isKeyPillar
+            ? (_a = groupBanner.key_pillars) !== null && _a !== void 0 ? _a : null
+            : null;
+        const banners = (_b = (isKeyPillar
+            ? groupBanner.banners
+            : list_banners)) !== null && _b !== void 0 ? _b : [];
+        return {
+            keyPillars: {
+                name: (keyPillarData === null || keyPillarData === void 0 ? void 0 : keyPillarData.name) || '',
+                slug: (keyPillarData === null || keyPillarData === void 0 ? void 0 : keyPillarData.slug) || '',
+            },
+            banners: banners.map((banner) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                const setting = banner.banner_setting;
+                const desktop = normalizeApiString(banner.desktop);
+                const mobile = normalizeApiString(banner.mobile);
+                const isPopupMode = Boolean((setting === null || setting === void 0 ? void 0 : setting.button_text) && isSessionPopupMode);
+                const popupSecondaryButton = formatCtaBannerPopupActionButton((_a = setting === null || setting === void 0 ? void 0 : setting.popup_buttons) === null || _a === void 0 ? void 0 : _a.first_button, {
+                    backgroundColor: defaultColor.button,
+                    backgroundGradient: defaultColor.gradient,
+                    openNewTab: true,
+                });
+                const popupPrimaryButton = formatCtaBannerPopupActionButton((_b = setting === null || setting === void 0 ? void 0 : setting.popup_buttons) === null || _b === void 0 ? void 0 : _b.second_button, {
+                    backgroundColor: defaultColor.button,
+                    backgroundGradient: defaultColor.gradient,
+                    openNewTab: true,
+                });
+                if (isPopupMode) {
+                    return Object.assign(Object.assign({ desktop,
+                        mobile, titleColor: defaultColor.title, title: (_c = setting === null || setting === void 0 ? void 0 : setting.title) !== null && _c !== void 0 ? _c : '', descriptionColor: defaultColor.description, description: (_d = setting === null || setting === void 0 ? void 0 : setting.description) !== null && _d !== void 0 ? _d : '' }, ((popupSecondaryButton || popupPrimaryButton) && {
+                        popupButtons: Object.assign(Object.assign({}, (popupSecondaryButton && {
+                            secondary: popupSecondaryButton,
+                        })), (popupPrimaryButton && { primary: popupPrimaryButton })),
+                    })), { buttons: {
+                            primary: {
+                                backgroundColor: defaultColor.button,
+                                backgroundGradient: defaultColor.gradient,
+                                title: (_e = setting === null || setting === void 0 ? void 0 : setting.button_text) !== null && _e !== void 0 ? _e : '',
+                                url: '',
+                                openNewTab: false,
+                                embedYoutube: false,
+                                youtubeLink: '',
+                            },
+                        } });
+                }
+                return {
+                    desktop,
+                    mobile,
+                    titleColor: defaultColor.title,
+                    title: (_f = setting === null || setting === void 0 ? void 0 : setting.title) !== null && _f !== void 0 ? _f : '',
+                    descriptionColor: defaultColor.description,
+                    description: (_g = setting === null || setting === void 0 ? void 0 : setting.description) !== null && _g !== void 0 ? _g : '',
+                    buttons: {
+                        primary: {
+                            backgroundColor: defaultColor.button,
+                            backgroundGradient: defaultColor.gradient,
+                            title: (_h = setting === null || setting === void 0 ? void 0 : setting.button_text) !== null && _h !== void 0 ? _h : '',
+                            url: (_j = setting === null || setting === void 0 ? void 0 : setting.button_link) !== null && _j !== void 0 ? _j : '',
+                            openNewTab: Boolean(open_new_tab),
+                            embedYoutube: Boolean(setting === null || setting === void 0 ? void 0 : setting.embed_youtube),
+                            youtubeLink: (_k = setting === null || setting === void 0 ? void 0 : setting.youtube_link) !== null && _k !== void 0 ? _k : '',
+                        },
+                    },
+                };
+            }),
+        };
+    });
+    return Object.assign(Object.assign({ type: cta_banner_type !== null && cta_banner_type !== void 0 ? cta_banner_type : 'multiple-image', layout: resolvedLayout, gridLayout, shortReelLayout: Boolean(short_reel_layout), fixSizeBanner: Boolean(fix_size_banner), applyCarousel: Boolean(apply_carousel), layoutKeyPillars, expandAllCategories: Boolean(expand_all_categories), listing }, (sharedPopupSetting && { popupSetting: sharedPopupSetting })), (advanced_settings && { advancedSettings: advanced_settings }));
+};
+const formatCTABanner = formatCTABannerTypeMultiSession;
+const formatCTABannerSession = (data) => {
+    return Object.assign(Object.assign({}, formatCommonProps(data)), (data.cta_banner_type === 'single-image'
+        ? formatCTABannerTypeSingleSession(data)
+        : formatCTABannerTypeMultiSession(data)));
+};
+
 const formatHelloWellnessFeatureImage = (data) => ({
     image: (data === null || data === void 0 ? void 0 : data.image) || '',
     header: (data === null || data === void 0 ? void 0 : data.header) || '',
     description: (data === null || data === void 0 ? void 0 : data.description) || '',
     redirectLink: (data === null || data === void 0 ? void 0 : data.redirect_link) || '',
 });
+const formatHelloWellnessSectionArticle = (data) => {
+    var _a, _b;
+    if (!(data === null || data === void 0 ? void 0 : data.display_type))
+        return undefined;
+    if (data.display_type === 'feature_image') {
+        return {
+            displayType: 'feature_image',
+            featureImages: ((_a = data.feature_images) === null || _a === void 0 ? void 0 : _a.map((item) => {
+                var _a, _b;
+                return ({
+                    image: (item === null || item === void 0 ? void 0 : item.image) || '',
+                    header: ((_a = item === null || item === void 0 ? void 0 : item.content) === null || _a === void 0 ? void 0 : _a.title) || '',
+                    description: ((_b = item === null || item === void 0 ? void 0 : item.content) === null || _b === void 0 ? void 0 : _b.description) || '',
+                    redirectLink: (item === null || item === void 0 ? void 0 : item.redirect_link) || '',
+                    openNewTab: Boolean(item === null || item === void 0 ? void 0 : item.open_new_tab),
+                });
+            })) || [],
+        };
+    }
+    return {
+        displayType: 'article_list',
+        articleList: ((_b = data.article_list) === null || _b === void 0 ? void 0 : _b.map((article) => dataTransform.formatArticle(article))) || [],
+    };
+};
 const formatHelloWellnessPinCategoryItem = (item) => {
     if (!item)
         return null;
@@ -2822,36 +3101,45 @@ const formatHelloWellnessPinCategoryItem = (item) => {
     return null;
 };
 const formatHelloWellnessSettings = (settings) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
     if (!settings)
         return {};
     return {
+        hideAdvertisements: (_a = settings.hide_advertisements) !== null && _a !== void 0 ? _a : true,
         menu: {
             spotlightMenu: {
-                banner: ((_b = (_a = settings.menu) === null || _a === void 0 ? void 0 : _a['spotlight-menu']) === null || _b === void 0 ? void 0 : _b.banner) || '',
-                url: ((_d = (_c = settings.menu) === null || _c === void 0 ? void 0 : _c['spotlight-menu']) === null || _d === void 0 ? void 0 : _d.url) || '',
+                banner: ((_c = (_b = settings.menu) === null || _b === void 0 ? void 0 : _b['spotlight-menu']) === null || _c === void 0 ? void 0 : _c.banner) || '',
+                url: ((_e = (_d = settings.menu) === null || _d === void 0 ? void 0 : _d['spotlight-menu']) === null || _e === void 0 ? void 0 : _e.url) || '',
             },
             videoMenu: {
-                videoUrl: ((_f = (_e = settings.menu) === null || _e === void 0 ? void 0 : _e.video_menu) === null || _f === void 0 ? void 0 : _f.video_url) || '',
-                thumbnail: typeof ((_h = (_g = settings.menu) === null || _g === void 0 ? void 0 : _g.video_menu) === null || _h === void 0 ? void 0 : _h.thumbnail_video) === 'string'
+                videoUrl: ((_g = (_f = settings.menu) === null || _f === void 0 ? void 0 : _f.video_menu) === null || _g === void 0 ? void 0 : _g.video_url) || '',
+                thumbnail: typeof ((_j = (_h = settings.menu) === null || _h === void 0 ? void 0 : _h.video_menu) === null || _j === void 0 ? void 0 : _j.thumbnail_video) === 'string'
                     ? settings.menu.video_menu.thumbnail_video
                     : '',
-                title: ((_k = (_j = settings.menu) === null || _j === void 0 ? void 0 : _j.video_menu) === null || _k === void 0 ? void 0 : _k.title) || '',
+                title: ((_l = (_k = settings.menu) === null || _k === void 0 ? void 0 : _k.video_menu) === null || _l === void 0 ? void 0 : _l.title) || '',
             },
         },
         helloWellnessCategory: {
-            icon: ((_l = settings.hello_wellness_category) === null || _l === void 0 ? void 0 : _l.icon) || '',
-            categoryName: ((_m = settings.hello_wellness_category) === null || _m === void 0 ? void 0 : _m.category_name) || '',
-        },
-        landingPage: {
-            bannerDesktop: ((_o = settings.landing_page) === null || _o === void 0 ? void 0 : _o.banner_desktop) || '',
-            bannerMobile: ((_p = settings.landing_page) === null || _p === void 0 ? void 0 : _p.banner_mobile) || '',
-            headerForCategoriesList: ((_q = settings.landing_page) === null || _q === void 0 ? void 0 : _q.header_for_categories_list) || '',
-            categories: ((_s = (_r = settings.landing_page) === null || _r === void 0 ? void 0 : _r.category) === null || _s === void 0 ? void 0 : _s.map((category) => utils$1.formatCategory(category))) || [],
+            icon: ((_m = settings.hello_wellness_category) === null || _m === void 0 ? void 0 : _m.icon) || '',
+            categoryName: ((_o = settings.hello_wellness_category) === null || _o === void 0 ? void 0 : _o.category_name) || '',
         },
+        landingPage: Object.assign(Object.assign(Object.assign({ bannerDesktop: ((_p = settings.landing_page) === null || _p === void 0 ? void 0 : _p.banner_desktop) || '', bannerMobile: ((_q = settings.landing_page) === null || _q === void 0 ? void 0 : _q.banner_mobile) || '', icon: ((_r = settings.landing_page) === null || _r === void 0 ? void 0 : _r.icon) || '', pageName: ((_s = settings.landing_page) === null || _s === void 0 ? void 0 : _s.page_name) || '', pageDescription: ((_t = settings.landing_page) === null || _t === void 0 ? void 0 : _t.page_description) || '', enableSectionBanner: Boolean((_u = settings.landing_page) === null || _u === void 0 ? void 0 : _u.enable_section_banner) }, (((_v = settings.landing_page) === null || _v === void 0 ? void 0 : _v.section_banner) && {
+            sectionBanner: Object.assign(Object.assign({}, (settings.landing_page.section_banner.cta_banner_type ===
+                'single-image'
+                ? formatCTABannerTypeSingleSession(settings.landing_page.section_banner)
+                : formatCTABannerTypeMultiSession(settings.landing_page.section_banner))), { title: settings.landing_page.section_banner.title || '', description: settings.landing_page.section_banner.description || '', backgroundColor: settings.landing_page.section_banner.background_color || '' }),
+        })), { sectionCategory: {
+                headerForCategoriesList: ((_x = (_w = settings.landing_page) === null || _w === void 0 ? void 0 : _w.section_category) === null || _x === void 0 ? void 0 : _x.header_for_categories_list) ||
+                    '',
+                categories: ((_0 = (_z = (_y = settings.landing_page) === null || _y === void 0 ? void 0 : _y.section_category) === null || _z === void 0 ? void 0 : _z.category) === null || _0 === void 0 ? void 0 : _0.map((category) => utils$1.formatCategory(category))) || [],
+            } }), (() => {
+            var _a;
+            const sectionArticle = formatHelloWellnessSectionArticle((_a = settings.landing_page) === null || _a === void 0 ? void 0 : _a.section_article);
+            return sectionArticle ? { sectionArticle } : {};
+        })()),
         pinArticleForEachCategory: {
-            sponsorLogo: ((_t = settings.pin_article_for_each_category) === null || _t === void 0 ? void 0 : _t.sponsor_logo) || '',
-            listCategories: ((_v = (_u = settings.pin_article_for_each_category) === null || _u === void 0 ? void 0 : _u.list_categories) === null || _v === void 0 ? void 0 : _v.map(formatHelloWellnessPinCategoryItem).filter(Boolean)) || [],
+            sponsorLogo: ((_1 = settings.pin_article_for_each_category) === null || _1 === void 0 ? void 0 : _1.sponsor_logo) || '',
+            listCategories: ((_3 = (_2 = settings.pin_article_for_each_category) === null || _2 === void 0 ? void 0 : _2.list_categories) === null || _3 === void 0 ? void 0 : _3.map(formatHelloWellnessPinCategoryItem).filter(Boolean)) || [],
         },
     };
 };
@@ -3152,7 +3440,7 @@ const NavigationV2 = (props) => {
         React__namespace["default"].createElement(_NavigationV2, Object.assign({}, propsWithDefaultValues))));
 };
 const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
     const res = {};
     const isMarryBaby = locale === 'vi-VN_MB';
     const customLang = locale === 'tl-PH' ? 'lang=fil' : '';
@@ -3223,7 +3511,7 @@ const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0
         const hospitals = getSettledValue(hospitalsResult);
         res.care = {
             items: ((_x = (_w = (_v = (_u = specialties === null || specialties === void 0 ? void 0 : specialties._data) === null || _u === void 0 ? void 0 : _u.setting_menu) === null || _v === void 0 ? void 0 : _v.menu_specialty) === null || _w === void 0 ? void 0 : _w.map) === null || _x === void 0 ? void 0 : _x.call(_w, utils$1.formatSpecialties)) || [],
-            spotlights: ((_0 = (_z = (_y = hospitals === null || hospitals === void 0 ? void 0 : hospitals._data.setting_menu) === null || _y === void 0 ? void 0 : _y.menu_hospital) === null || _z === void 0 ? void 0 : _z.map) === null || _0 === void 0 ? void 0 : _0.call(_z, utils$1.formatHospital)) ||
+            spotlights: ((_1 = (_0 = (_z = (_y = hospitals === null || hospitals === void 0 ? void 0 : hospitals._data) === null || _y === void 0 ? void 0 : _y.setting_menu) === null || _z === void 0 ? void 0 : _z.menu_hospital) === null || _0 === void 0 ? void 0 : _0.map) === null || _1 === void 0 ? void 0 : _1.call(_0, utils$1.formatHospital)) ||
                 [],
         };
     }
@@ -3237,7 +3525,12 @@ exports.HHG_SEARCH_BACK_KEY = HHG_SEARCH_BACK_KEY;
 exports.HamburgerWhite = HamburgerWhite;
 exports.NavigationV2 = NavigationV2;
 exports.StarPair = StarPair;
+exports.formatCTABanner = formatCTABanner;
+exports.formatCTABannerSession = formatCTABannerSession;
+exports.formatCTABannerTypeMultiSession = formatCTABannerTypeMultiSession;
+exports.formatCTABannerTypeSingleSession = formatCTABannerTypeSingleSession;
 exports.formatHelloWellness = formatHelloWellness;
 exports.formatHelloWellnessSettings = formatHelloWellnessSettings;
 exports.getNavMenuContent = getNavMenuContent;
 exports.getNavMenuContentWithCache = getNavMenuContentWithCache;
+exports.resolveCtaBannerLayoutFromApi = resolveCtaBannerLayoutFromApi;

package/build/{index-6bc28a5d.js → index-4a0c8f9f.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-efb072e2.js');
+var tslib_es6 = require('./tslib.es6-6cb17239.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index_styles = require('./index.styles-f0004ce9.js');
+var index_styles = require('./index.styles-e2ab41b3.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-e159ad47.js → index-4ad904c3.js}

@@ -1,15 +1,16 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-efb072e2.js');
+var tslib_es6 = require('./tslib.es6-6cb17239.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$1 = require('./index-fcd47e39.js');
-var togetherComponentGlobalContext = require('./utils-7974b5ec.js');
+var index$2 = require('./index-c41ab080.js');
+var index = require('./index-fb86e052.js');
+var togetherComponentGlobalContext = require('./utils-4081a7ef.js');
 var styled = require('@emotion/styled');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var constants = require('./constants-d1cfb0a0.js');
-var post = require('./post-3edae89e.js');
-var index = require('./index-25142a5c.js');
+var constants = require('./constants-10a56219.js');
+var post = require('./post-a3ee1f16.js');
+var index$1 = require('./index-a48ae7ba.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -178,7 +179,7 @@ function aspectRatioStringToPaddingTop(ratio) {
     }
     return `${(h / w) * 100}%`;
 }
-const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPlay = true, isShort = false, autoScaleByVideoType = false, ratio, posterFit = 'cover', onPushStatus, }) => {
+const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPlay = true, forceType, ratio, posterFit = 'cover', onPushStatus, }) => {
     const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
     const [previewData, setPreviewData] = React.useState(null);
     React.useEffect(() => {
@@ -226,18 +227,15 @@ const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPla
     const facebookVidId = React.useMemo(() => {
         return (displayUrl.includes('facebook.com') || displayUrl.includes('fb.watch'));
     }, [displayUrl]);
-    const isReelUrl = React.useMemo(() => {
-        const normalizedUrl = (displayUrl || '').toLowerCase();
-        return normalizedUrl.includes('/reel/') || normalizedUrl.includes('/reels/');
-    }, [displayUrl]);
+    const isShortLayoutUrl = React.useMemo(() => post.isShortOrReelVideoUrl(displayUrl), [displayUrl]);
     const shouldRenderEmbedVideo = React.useMemo(() => Boolean(youtubeVidId || facebookVidId), [facebookVidId, youtubeVidId]);
     const shouldRenderShortRatio = React.useMemo(() => {
-        if (!autoScaleByVideoType)
-            return false;
-        if (isShort)
+        if (forceType === index.VideoType.SHORTS)
             return true;
-        return displayUrl.toLowerCase().includes('/shorts/') || isReelUrl;
-    }, [autoScaleByVideoType, displayUrl, isReelUrl, isShort]);
+        if (forceType === index.VideoType.VIDEO)
+            return false;
+        return isShortLayoutUrl;
+    }, [forceType, isShortLayoutUrl]);
     const aspectPaddingTop = React.useMemo(() => (ratio ? aspectRatioStringToPaddingTop(ratio) : undefined), [ratio]);
     const embedWrapperRef = React.useRef(null);
     const responsiveWidth = React.useRef(0);
@@ -303,7 +301,7 @@ const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPla
         }
     }, [previewData]);
     const _theme = core.useMantineTheme();
-    return (React__default["default"].createElement(StyledSocialLinkPreview, { className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0], isShort: shouldRenderShortRatio, aspectPaddingTop: aspectPaddingTop, posterFit: posterFit }, shouldRenderEmbedVideo && (!image || isReelUrl) ? (React__default["default"].createElement("div", { ref: embedWrapperRef, className: "link-image-wrapper" }, youtubeVidId ? (React__default["default"].createElement(YoutubePlyr, { key: `${youtubeVidId}-${ratio !== null && ratio !== void 0 ? ratio : 'auto'}`, id: youtubeVidId, autoplay: autoPlay, isShort: shouldRenderShortRatio, ratio: ratio, posterFit: posterFit })) : facebookVidId ? (React__default["default"].createElement("iframe", { key: String(forceRerenderFB), src: `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(displayUrl)}&autoplay=${autoPlay ? 1 : 0}&show_text=false&t=0&width=${responsiveWidth.current}&height=${responsiveHeight.current}`, style: {
+    return (React__default["default"].createElement(StyledSocialLinkPreview, { className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0], isShort: shouldRenderShortRatio, aspectPaddingTop: aspectPaddingTop, posterFit: posterFit }, shouldRenderEmbedVideo && (!image || isShortLayoutUrl) ? (React__default["default"].createElement("div", { ref: embedWrapperRef, className: "link-image-wrapper" }, youtubeVidId ? (React__default["default"].createElement(YoutubePlyr, { key: `${youtubeVidId}-${ratio !== null && ratio !== void 0 ? ratio : 'auto'}`, id: youtubeVidId, autoplay: autoPlay, isShort: shouldRenderShortRatio, ratio: ratio, posterFit: posterFit })) : facebookVidId ? (React__default["default"].createElement("iframe", { key: String(forceRerenderFB), src: `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(displayUrl)}&autoplay=${autoPlay ? 1 : 0}&show_text=false&t=0&width=${responsiveWidth.current}&height=${responsiveHeight.current}`, style: {
             position: 'absolute',
             top: '50%',
             left: '50%',
@@ -313,7 +311,7 @@ const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPla
             width: responsiveWidth.current,
             transform: 'translate(-50%, -50%)',
         }, scrolling: "no", frameBorder: "0", allowFullScreen: true, allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share", loading: "lazy" })) : null)) : (React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
-        React__default["default"].createElement("div", { className: `link-image-wrapper ${(previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? 'fetching' : ''}` }, (previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? (React__default["default"].createElement(index.Loading, { className: "loading-spinner" })) : (React__default["default"].createElement(index$1.ImageWrap, { className: "link-image", src: displayImage || constants.DEFAULT_IMG, backupSrc: constants.DEFAULT_IMG, alt: displayUrl })))))));
+        React__default["default"].createElement("div", { className: `link-image-wrapper ${(previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? 'fetching' : ''}` }, (previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? (React__default["default"].createElement(index$1.Loading, { className: "loading-spinner" })) : (React__default["default"].createElement(index$2.ImageWrap, { className: "link-image", src: displayImage || constants.DEFAULT_IMG, backupSrc: constants.DEFAULT_IMG, alt: displayUrl })))))));
 };
 
 exports.SocialLinkPreview = SocialLinkPreview;