@hhgtech/hhg-components
Version:
Hello Health Group common components
1,121 lines (1,065 loc) • 134 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-5033cbef.js');
var React = require('react');
var index$b = require('./index-6c909f71.js');
var index$8 = require('./index-f46f9b08.js');
var index$3 = require('./index-02a489d8.js');
var normalizeLink = require('./normalizeLink-935ea0d1.js');
var dataTransform = require('./dataTransform-336e13af.js');
var core = require('@hhgtech/icons/core');
require('./translationsContext-a73ceb20.js');
var styled = require('@emotion/styled');
var index = require('./index-d62fced9.js');
var miscTheme = require('./miscTheme.js');
var navigationProfileButton = require('./index-2f16facd.js');
var other = require('@hhgtech/icons/other');
var core$1 = require('@mantine/core');
var index$d = require('./index-32ff06ec.js');
var throttle = require('lodash/throttle');
require('@mantine/dates');
var index$5 = require('./index-034cefcd.js');
require('./index-6d3687b7.js');
var index$4 = require('./index-e5454498.js');
var index$2 = require('./index-f3a410ea.js');
require('./index.styles-90997e57.js');
require('@mantine/hooks');
require('./text-af5ab4c9.js');
var utils = require('./utils-8e23afe2.js');
require('./index-e09c89e1.js');
var constants = require('./constants-e73c3489.js');
var store = require('./store-e689152a.js');
var constants$1 = require('./constants-5c7e7b94.js');
var index$1 = require('./index-e9201988.js');
var index$7 = require('./index-050b9c5b.js');
var index$6 = require('./index-7f031a12.js');
var useIsInit = require('./useIsInit-6563d2c6.js');
var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
var index$9 = require('./index-7eca4986.js');
var dayjs = require('dayjs');
var relativeTime = require('dayjs/plugin/relativeTime');
var index$a = require('./index-c3db379e.js');
var formatString = require('string-format');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var index$c = require('./index-602e6169.js');
var debounce = require('lodash/debounce');
var Locale = require('./Locale-ad67764b.js');
var core$2 = require('./core-142f47f1.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
var relativeTime__default = /*#__PURE__*/_interopDefault(relativeTime);
var formatString__default = /*#__PURE__*/_interopDefault(formatString);
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
const StyleInput = styled__default["default"](index.Input) `
.mantine-Input-input {
border-radius: 40px;
background: ${miscTheme.theme.colors.white};
border: 1px solid ${miscTheme.theme.colors.blue200};
&:focus {
border: 1px solid ${miscTheme.theme.colors.primaryBase};
}
}
.close-icon-wrapper {
display: flex;
background-color: ${miscTheme.theme.colors.gray400};
border-radius: 100%;
cursor: pointer;
svg {
pointer-events: none;
}
}
.search-icon-btn {
display: flex;
justify-content: center;
align-items: center;
}
`;
const HHG_SEARCH_BACK_KEY = 'hhg_search_history';
const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
const { locale, siteType } = React.useContext(navigationProfileButton.NavigationContext);
const [keyword, setKeyword] = React.useState('');
const [eventCategoryTracking, setEventCategoryTracking] = React.useState('Search From Another Page');
const { t } = index$1.useTranslations();
const goToSearchPage = React.useCallback((searchValue = '') => {
let sourceParam = '';
if (projectType === 'together') {
sourceParam = 'community';
}
if (projectType === 'discover') {
if (window.location.pathname.startsWith('/health-tools/')) {
sourceParam = 'health-tools';
}
else {
sourceParam = projectType;
}
}
localStorage.setItem(HHG_SEARCH_BACK_KEY, window.location.href);
const searchParams = new URLSearchParams(window.location.search);
searchParams.set('source', sourceParam);
searchParams.set('s', searchValue);
searchParams.delete('page');
window.location.href = `/search/?${searchParams.toString()}`;
}, [projectType]);
const goBack = React.useCallback(() => {
const historyBackUrl = localStorage.getItem(HHG_SEARCH_BACK_KEY);
if (!historyBackUrl) {
goToSearchPage('');
return;
}
localStorage.removeItem(HHG_SEARCH_BACK_KEY);
window.location.href = historyBackUrl;
}, [goToSearchPage]);
React.useEffect(() => {
if (typeof window !== 'undefined') {
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const searchValue = params.get('s');
if (projectType === 'discover' &&
window.location.pathname.startsWith('/search/')) {
setEventCategoryTracking('Search Page');
}
setKeyword(searchValue);
}
}, []);
return isMobile && !isHomepage ? (React__default["default"].createElement(index$2.Button, { variant: "tertiary", style: {
padding: '6px',
}, size: "sm", onClick: goBack },
React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
verticalAlign: 'bottom',
} },
React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default["default"].createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", "data-event-category": eventCategoryTracking, "data-event-action": "Search", "data-event-label": keyword, placeholder: siteType === 'marryBaby'
? t('navigation.search.input.placeholder')
: t('home.search', {
site: index$3.LOCALE_SPECS[locale || 'en-PH']
? index$3.LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
: '',
}), onChange: setKeyword, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
goToSearchPage(e.target.value), type: "search", onFocus: (e) => {
e.preventDefault();
if ((isMobile && isHomepage) || isRedirectSearchPage) {
goToSearchPage('');
}
}, rightSection: keyword ? (React__default["default"].createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
React__default["default"].createElement(core.Close, { size: 17, color: miscTheme.theme.colors.white }))) : (''), icon: React__default["default"].createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
if ((isMobile && isHomepage) || isRedirectSearchPage) {
goToSearchPage('');
}
} },
React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
verticalAlign: 'bottom',
} },
React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" }))) }));
};
const getEcomUrl = ({ path, locale, }) => {
var _a;
return `/shop/${(_a = constants.LOCALISED_SLUGS[locale || 'vi-VN']) === null || _a === void 0 ? void 0 : _a[path]}/`;
};
var useStyles = core$1.createStyles(() => {
return {
root: {
textDecoration: 'none',
},
iconText: {
color: '#fff',
},
};
});
const CartBadge = (_a) => {
var { count, styles, className, classNames, locale } = _a, boxProps = tslib_es6.__rest(_a, ["count", "styles", "className", "classNames", "locale"]);
const { classes, cx } = useStyles(undefined, {
name: 'CartBadge',
styles,
classNames,
});
return typeof count !== 'undefined' ? (React__default["default"].createElement(core$1.Box, Object.assign({ component: "a", href: getEcomUrl({ path: 'CART', locale }), className: cx(classes.root, className) }, boxProps),
React__default["default"].createElement(core$1.Indicator, { withBorder: true, color: 'red', size: 20, disabled: count === 0, label: React__default["default"].createElement(index$4.Text, { className: classes.iconText, size: "s5" }, count > 99 ? '99+' : count) },
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default["default"].createElement("path", { d: "M5.308 21.5q-.748 0-1.278-.53a1.74 1.74 0 0 1-.53-1.278V8.308q0-.75.53-1.278.53-.53 1.278-.53H7.5q0-1.873 1.313-3.187Q10.127 2 12 2t3.187 1.313T16.5 6.5h2.192q.749 0 1.278.53.53.53.53 1.278v11.384q0 .749-.53 1.278-.53.53-1.278.53zm0-1.5h13.384a.3.3 0 0 0 .212-.096.3.3 0 0 0 .096-.212V8.308a.3.3 0 0 0-.096-.212.3.3 0 0 0-.212-.096H5.308a.3.3 0 0 0-.212.096.3.3 0 0 0-.096.212v11.384q0 .116.096.212a.3.3 0 0 0 .212.096M9 6.5h6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3.5q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6.5m2.985 7q1.695 0 3.047-1.148 1.35-1.148 1.335-2.606a.74.74 0 0 0-.207-.528.7.7 0 0 0-.527-.218.7.7 0 0 0-.471.182 1 1 0 0 0-.295.506 2.8 2.8 0 0 1-1.036 1.665 2.9 2.9 0 0 1-1.846.647 2.93 2.93 0 0 1-1.854-.647A2.73 2.73 0 0 1 9.1 9.688q-.086-.34-.278-.514A.66.66 0 0 0 8.367 9a.72.72 0 0 0-.534.218.72.72 0 0 0-.216.528q0 1.457 1.336 2.606 1.335 1.148 3.032 1.148", fill: "#2D87F3" }))))) : null;
};
const StyledDisplayWrapper = styled__default["default"].div `
&.block-show {
display: block;
}
`;
const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, style, }) => {
// use CSS to display or not
const [lowerBoundValue, upperBoundValue] = React.useMemo(() => utils.getBoundariesFromMediaQueryKey(mediaQueryKey), [mediaQueryKey]);
return (React__default["default"].createElement(StyledDisplayWrapper, { lowerBound: forceDisplay ? 0 : lowerBoundValue, upperBound: forceDisplay ? 0 : upperBoundValue, className: className, style: style }, children));
};
var styles$2 = {"menuContainer":"y5VJdvw","menuIcon":"oVhOSCy","menuIconWrapper":"pX8OXTM"};
function ClosePopupIcon({ className }) {
return (React__default["default"].createElement("div", null,
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
React__default["default"].createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
}
function HamburgerIcon({ siteType, enableSearch, className, style, }) {
if (siteType === 'helloSites') {
return (React__default["default"].createElement("div", { className: "hamburger-container" },
React__default["default"].createElement("img", { "data-list-type": "Header", "data-content-type": "Navigation", "data-content-topic": "Hamburger", src: enableSearch
? index$5.CommonGAssets.getAssetPath('hamburgerMenuNewWithSearch.svg')
: index$5.CommonGAssets.getAssetPath('hamburgerMenuNew.svg'), style: Object.assign({ width: '24px', height: '24px' }, style), alt: "home", className: className, loading: "lazy" })));
}
/** Marry Baby */
return (React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
React__default["default"].createElement("path", { d: "M3.35 15a.65.65 0 0 1 .65-.65h10a.65.65 0 1 1 0 1.3H4a.65.65 0 0 1-.65-.65m0-6A.65.65 0 0 1 4 8.35h16a.65.65 0 1 1 0 1.3H4A.65.65 0 0 1 3.35 9", fill: "#3E3F58" })));
}
const StyledMasterMenuContainer = styled__default["default"].div `
position: fixed;
z-index: 201;
top: calc(100% - 1px);
width: 100%;
height: calc(100vh - var(--header-bottom));
overflow-x: hidden;
overflow-y: auto;
background: white;
display: flex;
flex-direction: column;
padding-bottom: 0;
left: 0;
.hhgcomp-navigation-popupwrapper-menuwrapper {
position: unset;
}
`;
styled__default["default"].div `
padding: 16px;
padding-bottom: 12px;
.fake-search-input {
pointer-events: none;
input {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
}
&[data-theme='marryBaby'] {
input {
background: ${miscTheme.theme.mbColors.lightGray};
border-radius: 16px;
border: none;
}
}
`;
const StyledWrapper = styled__default["default"].div `
display: block;
overflow-y: auto;
flex: 1;
padding-bottom: 16px;
&::-webkit-scrollbar {
width: 0;
display: none;
}
`;
const StyleWrapperSearch = styled__default["default"].div `
padding: 0 16px;
`;
const Phone = (_a) => {
var { size = 24, color = miscTheme.theme.colors.neutral600 } = _a, rest = tslib_es6.__rest(_a, ["size", "color"]);
return (React__default["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__default["default"].createElement("path", { d: "M6.088 18.75q-.63 0-1.068-.437a1.45 1.45 0 0 1-.438-1.07V2.757q0-.63.438-1.068a1.45 1.45 0 0 1 1.068-.438h7.82q.633 0 1.07.438.437.437.437 1.068v14.488q0 .63-.437 1.069a1.45 1.45 0 0 1-1.07.437zm3.91-1.859a.7.7 0 0 0 .522-.216.7.7 0 0 0 .216-.521.7.7 0 0 0-.216-.522.7.7 0 0 0-.521-.215.7.7 0 0 0-.522.215.7.7 0 0 0-.215.522.7.7 0 0 0 .215.521.7.7 0 0 0 .522.216m-4.166-3.333h8.333V4.792H5.832z", fill: color })));
};
const StyledItemGridLeft = styled__default["default"].div `
padding-right: 1rem;
background: #ffffff;
padding: 5px 15px;
${utils.MediaQueries.mbUp} {
border-right: 1px solid #e4e8ec;
display: flex;
flex-direction: column;
justify-content: space-between;
}
`;
const StyledItem$6 = styled__default["default"].a `
padding: 10px 0;
position: relative;
display: flex;
align-items: center;
&[data-is-mobile-tool='true'] {
align-items: flex-start;
.name,
.phone-icon {
margin-top: 4px;
}
}
text-decoration: none;
color: ${miscTheme.theme.colors.gray800};
* {
pointer-events: none;
}
.name {
font-size: 16px;
font-weight: 400;
}
&[data-theme='marryBaby']:hover,
&[data-theme='marryBaby'][data-active='true'] {
p {
color: ${miscTheme.theme.mbColors.pink};
}
.icon {
background-color: ${miscTheme.theme.mbColors.lightPink};
}
}
&[data-theme='helloSites']:hover,
&[data-theme='helloSites'][data-active='true'] {
p {
color: ${miscTheme.theme.colors.primaryActive};
}
}
a {
}
&[data-theme='marryBaby'] {
.icon {
display: flex;
align-items: center;
justify-content: center;
max-width: 40px;
width: 100%;
height: 40px;
border-radius: 50%;
background-color: ${miscTheme.theme.mbColors.lightGray};
img {
border-radius: 50%;
}
}
}
`;
const StyledHeading$1 = styled__default["default"].div `
margin: 15px 0;
${utils.MediaQueries.mbDown} {
display: none;
}
`;
const StyledIconNav = styled__default["default"].div `
display: flex;
position: absolute;
right: 0;
${utils.MediaQueries.mbUp} {
&.arrow-icon {
display: none;
}
}
`;
const StyledItemAll = styled__default["default"].div `
display: flex;
align-items: center;
color: ${miscTheme.theme.colors.primaryBase};
font-size: ${miscTheme.theme.sizes.fsParagraph4};
font-weight: ${miscTheme.theme.sizes.fwBold};
line-height: 24px;
font-size: 14px;
font-weight: 600;
&[data-theme='marryBaby'] {
color: ${miscTheme.theme.mbColors.pink};
}
`;
const StyledImageWrapper = styled__default["default"].div `
display: flex;
align-items: center;
margin-left: 10px;
`;
const StyledViewMore$1 = styled__default["default"].a `
border: 1px solid ${miscTheme.theme.colors.primaryBase};
&[data-theme='marryBaby'] {
border: 1px solid ${miscTheme.theme.mbColors.pink};
svg path {
stroke: ${miscTheme.theme.mbColors.pink};
}
}
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 5px;
margin-top: 20px;
${utils.MediaQueries.mbDown} {
display: none;
}
`;
var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","itemNavButton":"-sx0jrx","scale":"EDlp5Zf"};
const ItemMenu = ({ item, menu }) => {
const { containerRef, onButtonMouseDown, onClose } = navigationProfileButton.useCSSFocusPopupHelper({
allowBgScroll: true,
});
const isInit = useIsInit.useIsInit();
if (!item.popupType && item.link) {
return (React__default["default"].createElement(NewWrapper, { isNew: item.isNew },
React__default["default"].createElement("a", { className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
React__default["default"].createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.menuButton }, item.name))));
}
return (React__default["default"].createElement(NewWrapper, { isNew: item.isNew },
React__default["default"].createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, key: item.id, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
React__default["default"].createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, onMouseDown: onButtonMouseDown, className: styles$1.menuButton },
item.name,
item.popupType && (React__default["default"].createElement(React__default["default"].Fragment, null, (item === null || item === void 0 ? void 0 : item.icon) ? (React__default["default"].createElement("div", { className: "wrapper-menu-icon" },
React__default["default"].createElement("div", { className: "origin-icon" }, item.icon),
React__default["default"].createElement("div", { className: "close-icon", onClick: onClose },
React__default["default"].createElement(core.Close, { size: 16 })))) : (React__default["default"].createElement("div", { className: styles$1.menuIconWrapper },
React__default["default"].createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
React__default["default"].createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: "#202135", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }))))))),
React__default["default"].isValidElement(menu)
? React__default["default"].cloneElement(menu, {
onClose,
})
: null)));
};
const NewWrapper = ({ isNew, children, }) => {
const { t } = index$1.useTranslations();
if (isNew) {
return (React__default["default"].createElement(index$6.Indicator, { color: "green", label: t('home.navigator.menuItem.new'), size: 20, styles: {
root: {
paddingRight: 10,
},
} }, children));
}
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
};
const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuItems, headingTitle, activeItem, }) => {
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
const { t } = index$1.useTranslations();
const theme = core$1.useMantineTheme();
return (React__default["default"].createElement(StyledItemGridLeft, null,
React__default["default"].createElement("div", null,
React__default["default"].createElement(StyledHeading$1, null,
React__default["default"].createElement(index$7.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
menuItems.slice(0, 6).map((item, index) => {
const href = (item === null || item === void 0 ? void 0 : item.link)
? (item === null || item === void 0 ? void 0 : item.link.startsWith('http'))
? item === null || item === void 0 ? void 0 : item.link
: `${UrlFE}/${item === null || item === void 0 ? void 0 : item.link.split('/').filter(Boolean).join('/')}/`
: '/';
return (React__default["default"].createElement(StyledItem$6, Object.assign({ className: "iconMenu", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": href, "data-is-heading-category": false, "data-active": item.id && item.id === activeItem, "data-is-mobile-tool": item.isMobileAppTool, href: href }, (!index$8.isInternalLink(href) && {
target: '_blank',
}), { "data-theme": siteType, key: index, onClick: onClosePopup }),
React__default["default"].createElement("div", { className: "icon" },
React__default["default"].createElement("img", { loading: "lazy", alt: item.name, src: item.thumbnail || '/images/avatar.jpg', style: {
width: 32,
height: 32,
maxWidth: 32,
maxHeight: 32,
overflow: 'hidden',
} })),
React__default["default"].createElement(NewWrapper, { isNew: item.isNew },
React__default["default"].createElement("div", { style: {
padding: '0 0.4rem',
paddingRight: item.isNew ? 10 : 0,
} },
React__default["default"].createElement("p", { className: "name" }, item.name),
item.isMobileAppTool && (React__default["default"].createElement(index$4.Text, { size: "n1", color: theme.fn.primaryColor(), weight: "regular" }, t('home.calcWithApp'))))),
item.isMobileAppTool && (React__default["default"].createElement(StyledIconNav, null,
React__default["default"].createElement(Phone, { className: "phone-icon", size: 16 }))),
React__default["default"].createElement(StyledIconNav, { className: "arrow-icon" },
React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('chevronRight.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" }))));
})),
titleBtnViewMore && (React__default["default"].createElement(StyledViewMore$1, { "data-theme": siteType, style: { textDecoration: 'none' }, href: hrefViewMore, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": hrefViewMore },
React__default["default"].createElement(StyledItemAll, { onClick: onClosePopup, "data-theme": siteType, "data-is-heading-category": false },
titleBtnViewMore,
React__default["default"].createElement(StyledImageWrapper, null,
React__default["default"].createElement("img", { className: "svg", src: siteType === 'marryBaby'
? index$5.CommonGAssets.getAssetPath('chevronRightPink.svg')
: index$5.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))))));
};
const StyledContainerItems$5 = styled__default["default"].div `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 3.5rem;
${utils.MediaQueries.tdDown} {
grid-template-columns: repeat(1, 1fr);
}
`;
const StyledImageCard$3 = styled__default["default"].div `
height: 152px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
overflow: hidden;
border-radius: 4px;
padding: 16px;
width: 100%;
.img-container {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
${utils.MediaQueries.tdDown} {
margin-bottom: 0;
padding: 0;
height: 100%;
position: unset;
width: 150px;
}
${utils.MediaQueries.mbDown} {
width: 80px;
}
`;
const StyledImageCardInner = styled__default["default"].div `
background-color: #ffffff;
border-radius: 4px;
width: 100%;
height: 100%;
`;
const StyledBtnView$2 = styled__default["default"].div `
display: flex;
margin-top: 1rem;
align-items: center;
color: ${miscTheme.theme.colors.primaryBase};
font-weight: 400;
font-size: 14px;
text-decoration: none;
${utils.MediaQueries.tdDown} {
display: none;
}
`;
const StyledTitle$5 = styled__default["default"].p `
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: ${miscTheme.theme.colors.gray800};
${utils.MediaQueries.tdDown} {
padding: 0;
}
`;
const StyledDes$2 = styled__default["default"].p `
font-size: 14px;
line-height: 1.6;
font-weight: 400;
color: ${miscTheme.theme.colors.gray600};
height: 40px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: auto;
${utils.MediaQueries.tdDown} {
height: unset;
padding: 0;
}
`;
const StyledContentWrapper$2 = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].div `
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
z-index: 1;
${utils.MediaQueries.tdDown} {
gap: 4px;
}
`, 'hhgcomp-navigation-menucareitem-contentwrapper');
const StyledItem$5 = styled__default["default"].a `
text-decoration: none;
border-radius: 4px;
background: ${miscTheme.theme.colors.white};
position: relative;
overflow: hidden;
padding: 16px;
display: flex;
padding-top: 166px;
* {
pointer-events: none;
}
${utils.MediaQueries.tdUp} {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
0px 0px 1px rgba(0, 0, 0, 0.04);
gap: 30px;
flex-direction: column;
a {
display: flex;
width: 100%;
}
}
${utils.MediaQueries.tdDown} {
padding-top: 16px;
a {
display: none;
}
grid-template-columns: 2fr 1fr;
gap: 10px;
display: grid;
max-height: 110px;
display: flex;
flex-direction: row-reverse;
> ${StyledContentWrapper$2.classSelector} {
flex: 1;
}
img {
width: 150px;
}
}
${utils.MediaQueries.mbDown} {
box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.04),
0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: row-reverse;
img {
width: 80px;
height: 80px;
}
}
${utils.MediaQueries.tdOnly} {
border: 1px solid ${miscTheme.theme.colors.neutral100};
}
.bg-svg {
width: 100%;
max-width: 245px;
height: 100%;
top: 0;
right: -40px;
position: absolute;
display: inline-block;
}
`;
const Item$4 = ({ item, index = 0 }) => {
var _a;
const { t } = index$1.useTranslations();
const { locale, configs: { statics }, } = React.useContext(navigationProfileButton.NavigationContext);
if (!item)
return null;
const href = `${statics.CARE_URL_FE}/${(_a = constants$1.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${item.slug}-${item.id}`;
return (React__default["default"].createElement(StyledItem$5, { key: item.id, href: href, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": href },
React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('navCareCardBg.svg'), alt: "", className: "bg-svg", loading: "lazy" }),
React__default["default"].createElement(StyledImageCard$3, null,
React__default["default"].createElement(StyledImageCardInner, null,
React__default["default"].createElement("img", { loading: "lazy", alt: item.name, src: item.logo || '/images/avatar.jpg' }))),
React__default["default"].createElement(StyledContentWrapper$2, null,
React__default["default"].createElement(StyledTitle$5, null, item.name),
React__default["default"].createElement(StyledDes$2, null, item.description),
React__default["default"].createElement(StyledBtnView$2, null,
t('home.seeMore'),
React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
width: '16px',
height: '16px',
marginTop: '3px',
marginLeft: '5px',
}, loading: "lazy" })))));
};
const StyledContainerNoPosts = styled__default["default"].div `
padding: 16px;
border-radius: 8px;
position: relative;
z-index: 1;
overflow: hidden;
a {
text-decoration: none;
}
.bg-svg {
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
${utils.MediaQueries.mbDown} {
display: block;
.bg-svg {
right: -24px;
left: unset;
top: 0;
transform: rotateY(180deg);
}
}
${utils.MediaQueries.mbUp} {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 3fr;
}
`;
const StyledDescription = styled__default["default"].div `
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: ${miscTheme.theme.colors.gray600};
margin-bottom: 15px;
`;
const StyledTitle$4 = styled__default["default"].div `
font-weight: 600;
font-size: 16px;
line-height: 26px;
color: #000000;
margin-bottom: 4px;
`;
const StyledContentLeft = styled__default["default"].div `
background: #fff;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
`;
const StyledLeft = styled__default["default"].div `
display: flex;
justify-content: center;
align-items: center;
position: relative;
${utils.MediaQueries.mbDown} {
justify-content: end;
min-height: 100px;
}
`;
const SpotlightNoData = ({ title, link, description, cta, icon }) => {
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
return (React__default["default"].createElement(StyledContainerNoPosts, { "data-theme": siteType },
React__default["default"].createElement(StyledLeft, null,
React__default["default"].createElement("img", { src: siteType === 'marryBaby'
? index$5.CommonGAssets.getAssetPath('navMBSpotlightBgNoData.svg')
: index$5.CommonGAssets.getAssetPath('navSpotlightBgNoData.svg'), alt: "", loading: "lazy", className: "bg-svg" }),
React__default["default"].createElement(StyledContentLeft, null, icon && React__default["default"].createElement("img", { src: icon, width: 64, height: 64, loading: "lazy" }))),
React__default["default"].createElement("div", null,
title && React__default["default"].createElement(StyledTitle$4, null, title),
description && React__default["default"].createElement(StyledDescription, null, description),
cta && (React__default["default"].createElement("div", null,
React__default["default"].createElement("a", { href: link },
React__default["default"].createElement(index$9.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, cta)))))));
};
const StyledItemGridRight = styled__default["default"].div `
margin-top: 10px;
background: #ffffff;
padding: 5px 15px;
position: relative;
${utils.MediaQueries.mbDown} {
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: ${miscTheme.theme.colors.neutral100};
content: '';
}
}
`;
const StyledHeading = styled__default["default"].div `
margin: 15px 0;
display: flex;
`;
const StyledViewMore = styled__default["default"].a `
padding-left: 10px;
display: flex;
align-items: center;
text-decoration: none;
font-weight: 400;
font-size: 14px;
color: ${miscTheme.theme.colors.primaryBase};
&[data-theme='marryBaby'] {
color: ${miscTheme.theme.mbColors.pink};
}
img {
padding-left: 5px;
}
${utils.MediaQueries.mbDown} {
margin-left: auto;
}
`;
const Spotlights = ({ title, viewMore, children, link, dataEventAction = '', }) => {
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
return (React__default["default"].createElement(StyledItemGridRight, null,
React__default["default"].createElement(StyledHeading, null,
React__default["default"].createElement(index$7.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, title),
viewMore && (React__default["default"].createElement(StyledViewMore, { "data-event-category": "Hamburger Navigation", "data-event-action": dataEventAction, "data-event-label": link, href: link, "data-theme": siteType },
viewMore,
React__default["default"].createElement("img", { src: siteType === 'marryBaby'
? index$5.CommonGAssets.getAssetPath('chevronRightPink.svg')
: index$5.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))),
children));
};
const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
const { t } = index$1.useTranslations();
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlightHospitals') }, spotlights.length !== 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(StyledContainerItems$5, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 3).map((s, index) => (React__default["default"].createElement(Item$4, { key: index, index: index, item: s })))),
React__default["default"].createElement("div", { style: {
position: 'absolute',
bottom: '6px',
right: '1rem',
} },
React__default["default"].createElement("a", { href: hrefViewMore },
React__default["default"].createElement(index$9.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, t('home.navigator.menu.care.homeButton')))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.care.noDatas.title'), description: t('home.navigator.menu.care.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.care.homeButton'), icon: index$5.CommonGAssets.getAssetPath('community.svg') }))));
};
const StyledContainerItems$4 = styled__default["default"].div `
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
${utils.MediaQueries.tdDown} {
gap: 12px;
grid-template-columns: 1fr;
}
`;
const StyledItem$4 = styled__default["default"].a `
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
* {
pointer-events: none;
}
`;
const StyledImageCard$2 = styled__default["default"].div `
border-radius: 5px;
display: block;
overflow: hidden;
padding-top: 140%;
width: 100%;
position: relative;
height: 0;
img {
position: absolute;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
top: 0;
left: 0;
}
${utils.MediaQueries.tdDown} {
width: 72px;
padding-top: 100px;
}
`;
const StyledTitle$3 = styled__default["default"].p `
font-size: 16px;
font-weight: 400;
padding: 4px 15px;
line-height: 1.4;
color: ${miscTheme.theme.colors.gray800};
flex: 1;
${utils.MediaQueries.tdUp} {
display: none;
}
`;
const Item$3 = ({ item, index = 0 }) => {
if (!item)
return null;
return (React__default["default"].createElement(StyledItem$4, { key: item.id, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": `Spotlight Click ${index + 1}`, "data-event-label": item.link },
React__default["default"].createElement(StyledImageCard$2, null,
React__default["default"].createElement("img", { loading: "lazy", alt: item.title, src: item.banner || '/images/notFound-min-small.jpg' })),
React__default["default"].createElement(StyledTitle$3, null, item.title)));
};
const CategorySpotlights = ({ spotlightsList = [], hrefViewMore }) => {
const { t } = index$1.useTranslations();
const { configs: { statics }, } = React.useContext(navigationProfileButton.NavigationContext);
return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlights'), viewMore: t('home.navigator.menu.spotlights.seeAll'), link: hrefViewMore, dataEventAction: "Spotlight See More Click" }, spotlightsList.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$4, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((spotlight, index) => (React__default["default"].createElement(Item$3, { key: index, index: index, item: {
id: spotlight.id,
link: statics.HOME_PAGE_URL + spotlight.permalink,
title: spotlight.name,
banner: spotlight.image,
} }))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.category.noDatas.title'), description: t('home.navigator.menu.category.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.category.noDatas.cta'), icon: index$5.CommonGAssets.getAssetPath('Spotlight.svg') }))));
};
const StyledContainerItems$3 = styled__default["default"].div `
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 48px;
${utils.MediaQueries.tdDown} {
grid-template-columns: 1fr;
grid-gap: 32px;
}
${utils.MediaQueries.mbDown} {
grid-gap: 24px;
}
`;
const StyledContent$1 = styled__default["default"].div `
padding: 5px;
flex: 1;
`;
const StyledImage = styled__default["default"].img `
width: 88px;
height: 88px;
border-radius: 4px;
object-fit: cover;
`;
const StyledName = styled__default["default"].div `
font-size: 12px;
font-weight: 600;
color: ${miscTheme.theme.colors.gray800};
text-decoration: none;
&[data-theme='marryBaby'] {
font-weight: 400;
letter-spacing: -0.2px;
}
`;
const StyledCategory = styled__default["default"].div `
text-decoration: none;
font-size: 12px;
font-weight: 400;
color: ${miscTheme.theme.colors.primaryBase};
&[data-theme='marryBaby'] {
font-weight: 400;
letter-spacing: -0.2px;
}
`;
const StyledModifiedTime = styled__default["default"].div `
font-size: 12px;
font-weight: 400;
color: ${miscTheme.theme.colors.gray600};
`;
const StyledDot = styled__default["default"].div `
font-size: 12px;
font-weight: 400;
color: ${miscTheme.theme.colors.gray600};
`;
const StyledItem$3 = styled__default["default"].a `
display: flex;
gap: 10px;
text-decoration: none;
position: relative;
&::after {
content: '';
display: block;
width: 100%;
height: 1px;
border-top: 1px dashed ${miscTheme.theme.colors.neutral100};
position: absolute;
bottom: -24px;
${utils.MediaQueries.tdOnly} {
bottom: -16px;
}
${utils.MediaQueries.mbDown} {
bottom: -12px;
}
}
&:last-child {
&::after {
display: none;
}
}
${utils.MediaQueries.tdUp} {
&:nth-last-child(2) {
&::after {
display: none;
}
}
}
`;
const StyledInfoUser = styled__default["default"].div `
display: flex;
gap: 10px;
vertical-align: middle;
align-items: center;
`;
const StyledTitle$2 = styled__default["default"].div `
margin-top: 8px;
font-size: 16px;
font-weight: 600;
color: ${miscTheme.theme.colors.gray800};
&[data-theme='marryBaby'] {
margin-top: 12px;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.2px;
}
`;
const StyledInfo = styled__default["default"].div `
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 5px;
`;
const StyledWrapInfo = styled__default["default"].div `
display: flex;
gap: 4px;
flex-direction: column;
`;
dayjs__default["default"].extend(relativeTime__default["default"]);
const Item$2 = ({ post, index = 0 }) => {
var _a, _b, _c, _d, _e, _f, _g;
const { siteType, configs: { statics }, } = React.useContext(navigationProfileButton.NavigationContext);
if (!post)
return null;
const communityUrl = [statics.TOGETHER_URL_FE, (_a = post.community) === null || _a === void 0 ? void 0 : _a.slug].join('/');
const postUrl = [communityUrl, post.slug].join('/');
const time = post.createdAt;
const cleanedTimeDate = time
? !isNaN(new Date(time).getTime())
? new Date(time)
: null
: null;
const timeText = cleanedTimeDate ? dayjs__default["default"](cleanedTimeDate).toNow(true) : time;
return (React__default["default"].createElement(StyledItem$3, { href: postUrl, "data-event-category": "Hamburger Navigation", "data-event-action": `Together Click ${index + 1}`, "data-event-label": postUrl },
React__default["default"].createElement(StyledContent$1, null,
React__default["default"].createElement(StyledInfoUser, null,
React__default["default"].createElement(index$a.UserAvatar, { avatar: (_b = post.author) === null || _b === void 0 ? void 0 : _b.avatar, username: ((_c = post.author) === null || _c === void 0 ? void 0 : _c.name) || ((_d = post.author) === null || _d === void 0 ? void 0 : _d.username) }),
React__default["default"].createElement(StyledWrapInfo, null,
React__default["default"].createElement(StyledName, { "data-theme": siteType }, (_e = post.author) === null || _e === void 0 ? void 0 : _e.name),
React__default["default"].createElement(StyledInfo, null,
React__default["default"].createElement(StyledCategory, { "data-event-category": "Hamburger Navigation", "data-event-action": `Topic Click ${index + 1}`, "data-event-label": communityUrl, onClick: (e) => {
e.preventDefault();
location.href = communityUrl;
}, "data-theme": siteType }, (_f = post.community) === null || _f === void 0 ? void 0 : _f.name),
React__default["default"].createElement(StyledDot, null, "\u2022"),
React__default["default"].createElement(StyledModifiedTime, { "data-theme": siteType }, timeText)))),
React__default["default"].createElement(StyledTitle$2, null, post.title)),
!!((_g = post.photos) === null || _g === void 0 ? void 0 : _g.length) && (React__default["default"].createElement(StyledImage, { loading: "lazy", src: post.photos[0] }))));
};
const CommunitySpotlights = ({ spotlights = [] }) => {
const { configs: { statics }, } = React.useContext(navigationProfileButton.NavigationContext);
const { t } = index$1.useTranslations();
return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.trendingPosts'), viewMore: t('home.navigator.menu.trendingPosts.seeMore'), link: normalizeLink.normalizeLink(statics.TOGETHER_URL_FE), dataEventAction: "Together See More Click" }, spotlights.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$3, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 4).map((p, index) => (React__default["default"].createElement(Item$2, { index: index, post: p, key: p.id }))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.together.noPosts.title'), description: t('home.navigator.menu.together.noPosts.description'), link: `${statics.HOME_PAGE_URL}/community/`, cta: t('home.navigator.menu.together.noPosts.cta'), icon: index$5.CommonGAssets.getAssetPath('community.svg') }))));
};
const StyledContainerItems$2 = styled__default["default"].div `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 3.5rem;
${utils.MediaQueries.tdDown} {
grid-template-columns: repeat(1, 1fr);
}
`;
const StyledItem$2 = styled__default["default"].a `
text-decoration: none;
display: flex;
align-items: center;
`;
const Item$1 = ({ item, index = 0 }) => {
if (!item)
return null;
return (React__default["default"].createElement(StyledItem$2, { href: item.url, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": item.url },
React__default["default"].createElement("img", { loading: "lazy", alt: item.name, src: item.featuredImage || '/images/avatar.jpg', style: {
width: '40px',
height: '40px',
} }),
React__default["default"].createElement(index$4.Text, { size: "p2", weight: "regular", style: {
marginLeft: 16,
} }, item.name),
React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
width: '20px',
height: '20px',
marginLeft: 'auto',
}, loading: "lazy" })));
};
const EcomSpotlights = ({ helpfulUrls = [], }) => {
const { t } = index$1.useTranslations();
// const { siteType } = useContext(NavigationContext)
if (!helpfulUrls.length)
return null;
return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlightEcom') }, helpfulUrls.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$2, null, helpfulUrls === null || helpfulUrls === void 0 ? void 0 : helpfulUrls.slice(0, 5).map((s, index) => (React__default["default"].createElement(Item$1, { key: index, index: index, item: s }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null)
// <SpotlightNoData
// title={t('home.navigator.menu.ecom.noDatas.title')}
// description={t('home.navigator.menu.ecom.noDatas.description')}
// link={hrefViewMore}
// cta={t('home.navigator.menu.ecom.homeButton')}
// icon={CommonGAssets.getAssetPath('ecom.svg')}
// />
)));
};
const StyledContainerItems$1 = styled__default["default"].div `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
${utils.MediaQueries.tdDown} {
grid-template-columns: 1fr;
gap: 12px;
}
`;
const AppIcon = (_a) => {
var { size = 24, color = '#2D87F3' } = _a, rest = tslib_es6.__rest(_a, ["size", "color"]);
return (React__default["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__default["default"].createElement("rect", { width: "20", height: "20", rx: "4", fill: color }),
React__default["default"].createElement("path", { d: "M9.12