@hhgtech/hhg-components
Version:
Hello Health Group common components
1,146 lines (1,089 loc) • 142 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var index$9 = require('./index-ad7155cf.js');
var index$7 = require('./index-3ac41e12.js');
var index$2 = require('./index-1ee4ebb8.js');
var normalizeLink = require('./normalizeLink-4fe5440a.js');
var dataTransform = require('./dataTransform-4f6cd887.js');
var core$1 = require('@hhgtech/icons/core');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var index$d = require('./index-adb3bb30.js');
var index$4 = require('./index-c2c283f8.js');
var throttle = require('lodash/throttle');
var index$c = require('./index-ae1a5588.js');
require('@mantine/dates');
var index$3 = require('./index-db44e8cb.js');
require('./useMantineLocale-e946ce4a.js');
var index = require('./index-25f2e7a5.js');
var index$a = require('./index-86fd931c.js');
require('./index.styles-6dd86c20.js');
require('./translationsContext-d63b6d32.js');
require('@mantine/hooks');
var utils = require('./utils-7ba0038a.js');
require('./other-eb0ff2f6.js');
require('./index-9012f1d1.js');
var constants = require('./constants-bbf4cae1.js');
var styled = require('@emotion/styled');
var navigationProfileButton = require('./index-11702a43.js');
var store = require('./store-c7185440.js');
var index$1 = require('./index-b9594844.js');
var togetherComponentGlobalContext = require('./utils-aea77f4a.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var constants$1 = require('./constants-f334c51a.js');
var miscTheme = require('./miscTheme.js');
var index$6 = require('./index-b0c1d50a.js');
var index$5 = require('./index-41ffd2b1.js');
var useIsInit = require('./useIsInit-cd7f29ca.js');
var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
var dayjs = require('dayjs');
var relativeTime = require('dayjs/plugin/relativeTime');
var index$8 = require('./index-6f85be79.js');
var formatString = require('string-format');
var index$b = require('./index-9e79d4c7.js');
var debounce = require('lodash/debounce');
var Locale = require('./Locale-59ccf941.js');
var core$2 = require('./core-ee93a73c.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
var styled__default = /*#__PURE__*/_interopDefault(styled);
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 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.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.Box, Object.assign({ component: "a", href: getEcomUrl({ path: 'CART', locale }), className: cx(classes.root, className) }, boxProps),
React__default["default"].createElement(core.Indicator, { withBorder: true, color: 'red', size: 20, disabled: count === 0, label: React__default["default"].createElement(index.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$3 = {"bookingButton":"spdlGfq","bookingButtonAnchor":"vgS16jX"};
const BookingButton = ({ onCareHeaderClick, currentUrl, careUrlFe, btnName, }) => {
return onCareHeaderClick ? (React__default["default"].createElement(index$1.Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl, onClick: (e) => onCareHeaderClick(e), style: {
paddingLeft: 10,
paddingRight: 10,
} }, btnName)) : (React__default["default"].createElement("a", { href: careUrlFe, className: `${styles$3.bookingButtonAnchor} care-button no-replace-click` },
React__default["default"].createElement(index$1.Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl }, btnName)));
};
var styles$2 = {"menuContainer":"y5VJdvw","menuIcon":"oVhOSCy","menuIconWrapper":"pX8OXTM"};
const useNavConfig = ({ locale, projectType, siteType, enableBookingBtn, }) => {
const config = React.useMemo(() => {
const enableSearchBar = projectType === 'discover' ||
projectType === 'together' ||
projectType === 'marryBaby' ||
(projectType === 'profile' && siteType === 'marryBaby');
const enableNavCare = siteType !== 'marryBaby' &&
projectType !== 'marryBaby' &&
index$2.CARE_LOCALES.includes(locale);
const enableNavCareBooking = enableBookingBtn &&
projectType !== 'marryBaby' &&
projectType === 'discover' &&
siteType !== 'marryBaby' &&
index$2.CARE_BOOKING_LOCALES.includes(locale);
const enableNavTogether = projectType === 'marryBaby' || index$2.TOGETHER_LOCALES.includes(locale);
const enableNavDiscover = true;
const enableNavHealthTools = true;
const enableProfileMySaved = true;
const enableNavEcom = siteType !== 'marryBaby' && index$2.ECOM_LOCALES.includes(locale);
const enableProfileEcom = siteType !== 'marryBaby' && index$2.ECOM_LOCALES.includes(locale);
const enableProfileMyHealth = true;
const enableNavVideo = index$2.VIDEO_LOCALES.includes(locale);
const baseUrl = normalizeLink.getCurrentBaseUrl(locale, siteType === 'marryBaby');
let fixBaseUrl = baseUrl;
if (typeof window !== 'undefined') {
if (fixBaseUrl.includes('//id.'))
fixBaseUrl = fixBaseUrl.replace('id.', '');
if (fixBaseUrl.includes('//staging-id.'))
fixBaseUrl = fixBaseUrl.replace('staging-id.', 'discover.');
}
const ssoUrl = normalizeLink.getCurrentSsoUrl(locale, siteType === 'marryBaby');
const statics = (() => {
return {
HOME_PAGE_URL: fixBaseUrl,
CARE_URL_FE: `${fixBaseUrl}/care`,
TOGETHER_URL_FE: `${fixBaseUrl}/community`,
VIDEO_URL_FE: `${fixBaseUrl}/videos`,
SSO_URL: ssoUrl,
TOGETHER_API: normalizeLink.getTogetherApiDomain(),
DISCOVER_API: normalizeLink.getDiscoverApiDomain(locale),
};
})();
return {
enableSearchBar,
enableNavCare,
enableNavCareBooking,
enableNavTogether,
enableNavEcom,
enableProfileEcom,
enableNavVideo,
enableProfileMyHealth,
enableNavDiscover,
enableNavHealthTools,
enableProfileMySaved,
statics,
};
}, []);
return config;
};
const NavigationContext = React__default["default"].createContext({});
const NavigationProvider = (_a) => {
var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
const [currentUrl, setCurrentUrl] = React__default["default"].useState(() => {
return (props.currentUrl ||
`https://${props.siteType === 'marryBaby'
? togetherComponentGlobalContext.domainLocalesMarryBaby[props.locale || 'en-PH']
: constantsDomainLocales.domainLocales[props.locale || 'en-PH']}${props.projectType === 'together'
? '/community'
: props.projectType === 'ecom'
? '/ecom'
: props.projectType === 'care'
? '/care'
: ''}/`);
});
React.useEffect(() => {
const update = () => {
setCurrentUrl(window.location.href);
};
window.addEventListener('popstate', update);
update();
return () => {
window.removeEventListener('popstate', update);
};
}, []);
const configs = useNavConfig({
locale: props.locale,
projectType: props.projectType,
siteType: props.siteType,
enableBookingBtn: props.enableBookingBtn,
});
return (React__default["default"].createElement(NavigationContext.Provider, { value: Object.assign(Object.assign({}, props), { configs: Object.assign(Object.assign({}, configs), props.configs), currentUrl: props.currentUrl || currentUrl }) }, children));
};
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 }) {
if (siteType === 'helloSites') {
return (React__default["default"].createElement("div", null,
React__default["default"].createElement("img", { "data-list-type": "Header", "data-content-type": "Navigation", "data-content-topic": "Hamburger", src: enableSearch
? index$3.CommonGAssets.getAssetPath('hamburgerMenuNewWithSearch.svg')
: index$3.CommonGAssets.getAssetPath('hamburgerMenuNew.svg'), style: { width: '24px', height: '24px' }, 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("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$4.useTranslations();
if (isNew) {
return (React__default["default"].createElement(index$5.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(NavigationContext);
const { t } = index$4.useTranslations();
const theme = core.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$6.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$1) => {
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$7.isInternalLink(href) && {
target: '_blank',
}), { "data-theme": siteType, key: index$1, 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.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$3.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$3.CommonGAssets.getAssetPath('chevronRightPink.svg')
: index$3.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$4.useTranslations();
const { locale, configs: { statics }, } = React.useContext(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$3.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$3.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(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$3.CommonGAssets.getAssetPath('navMBSpotlightBgNoData.svg')
: index$3.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$1.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(NavigationContext);
return (React__default["default"].createElement(StyledItemGridRight, null,
React__default["default"].createElement(StyledHeading, null,
React__default["default"].createElement(index$6.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$3.CommonGAssets.getAssetPath('chevronRightPink.svg')
: index$3.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))),
children));
};
const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
const { t } = index$4.useTranslations();
const { siteType } = React.useContext(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$1.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$3.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$4.useTranslations();
const { configs: { statics }, } = React.useContext(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$3.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(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$8.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(NavigationContext);
const { t } = index$4.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$3.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: index$1 = 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 + 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.Text, { size: "p2", weight: "regular", style: {
marginLeft: 16,
} }, item.name),
React__default["default"].createElement("img", { src: index$3.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
width: '20px',
height: '20px',
marginLeft: 'auto',
}, loading: "lazy" })));
};
const EcomSpotlights = ({ helpfulUrls = [], }) => {
const { t } = index$4.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 6.005c0-.088-.005-.181-.012-.27-.022-.611-.623-1.071-1.208-1.046-.69.04-.839 1.007-.248 1.297.09.047.115.088.105.172v5.048c.004.064-.016.096-.077.122-.63.274-.474 1.276.233 1.304.583.03 1.16-.453 1.195-1.044q.012-.135.013-.272c0-1.77.013-3.54 0-5.311m-3.093 5.34c-.109-.048-.144-.108-.132-.232V6.117c.009-.114.103-.108.176-.165.544-.357.313-1.249-.346-1.264h-.023c-.659 0-1.172.546-1.172 1.194q-.002 2.09.004 4.177l.003 1.396c0 .62.527 1.175 1.15 1.175.68 0 .989-.978.34-1.285m7.299-1.489a.623.623 0 1 1-1.247 0 .623.623 0 0 1 1.247 0", fill: "#fff" }),
React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.927 9.821c0 1.338.925 2.46 2.162 2.743-.089 1.583-2.049 1.657-3.22 1.47a2.5 2.5 0 0 1-.716-.225 1.3 1.3 0 0 1-.614-.68c-.057-.142-.093-.293-.158-.431a.58.58 0 0 0-.674-.346.59.59 0 0 0-.462.603c.017.415.192.827.44 1.156.26.354.607.625 1.058.827.636.29 1.336.375 2.03.375.774 0 1.591-.132 2.267-.53.643-.38 1.25-.878 1.263-2.217a2.81 2.81 0 0 0 2.17-2.745c0-1.55-1.244-2.811-2.773-2.811S9.927 8.27 9.927 9.82m4.275 0c0 .841-.674 1.525-1.502 1.525a1.515 1.515 0 0 1-1.502-1.525c0-.84.674-1.525 1.502-1.525a1.516 1.516 0 0 1 1.502 1.525", fill: "#fff" })));
};
const StyledItem$1 = styled__default["default"].a `
text-decoration: none;
border-radius: 4px;
background: ${miscTheme.theme.colors.primary50};
position: relative;
overflow: hidden;
display: flex;