@hhgtech/hhg-components
Version:
Hello Health Group common components
353 lines (339 loc) • 17.8 kB
JavaScript
import React__default, { useMemo, useState, useEffect } from 'react';
import { u as useTranslations } from './index-9d21b711.js';
import { getCookie } from './miscCookieHelper.js';
import { C as CommonGAssets } from './index-ebe66e27.js';
import { e as normalizeLinkSlash, n as normalizeLink } from './normalizeLink-593b397a.js';
import { theme } from './miscTheme.js';
import { A as Avatar } from './index-de25673f.js';
import { b as getTogetherUserPostsApiPath } from './index-177a638d.js';
import { B as Button } from './index-6351bdee.js';
const INTERNAL_CARD_URLS = {
myBooking: 'booking',
mySaved: 'saved',
myHealth: 'health',
myFamily: 'family',
myCommunity: 'my-communities',
// TODO: this is hardcoded for VN, need to adapt to dynamic slug depend on locale
eCom: '/shop/ho-so/quan-li-don-hang/',
};
var styles$4 = {"navHeader":"uJQBNNg","navAvatar":"TfG3dM5","navHeaderUserInfos":"aMtjFNf","navHeaderUserName":"cSz2RR-","navHeaderMyProfileButton":"GyFm00F"};
function NavHeader({ userInfo, onClickMyProfileButton, themeName = 'helloSites', }) {
const { t } = useTranslations();
const nameFirstLetter = useMemo(() => {
const name = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username);
if (name && name.length) {
return name[0].toUpperCase();
}
return 'A';
}, [userInfo === null || userInfo === void 0 ? void 0 : userInfo.username, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name]);
const handleClickMyProfileButton = () => {
if (onClickMyProfileButton) {
onClickMyProfileButton();
}
};
return (React__default.createElement("div", { className: styles$4.navHeader, onClick: handleClickMyProfileButton },
React__default.createElement(Avatar, { className: styles$4.navAvatar, type: "rounded", size: "xl", avatarUrl: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, firstLetter: nameFirstLetter, backgroundColor: themeName === 'marryBaby'
? theme.mbColors.pink
: theme.colors.secondaryBase }),
React__default.createElement("div", { className: styles$4.navHeaderUserInfos },
React__default.createElement("div", { className: styles$4.navHeaderUserName }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username)),
React__default.createElement("div", { className: styles$4.navHeaderMyProfileButton, style: {
'--bg-hellosites': `url(${CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronRight.svg')})`,
'--bg-marrybaby': `url(${CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-arrowRight.svg')})`,
} }, t('userProfile.nav.header.viewProfile')))));
}
var styles$3 = {"navigationCard":"fVk18fq","navigationCardLabel":"v8TCvUb","navigationCardIconWrapper":"mx7T4V3"};
const iconBgColorMap = {
myHealth: theme.mbColors.toneYellow,
myCommunity: theme.mbColors.toneBlue,
mySaved: theme.mbColors.toneGreen,
};
// type CardIconUrlMap = IconUrlMap<UserProfileMenuCard>
const cardIconUrlMap = {
helloSites: {
myBooking: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myBooking.svg'),
myCommunity: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myCommunity.svg'),
myFamily: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myFamily.svg'),
myHealth: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myHealth.svg'),
mySaved: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-mySaved.svg'),
eCom: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-eCom.svg'),
},
marryBaby: {
mySaved: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-mySaved.svg'),
myCommunity: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myCommunity.svg'),
myHealth: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myHealth.svg'),
},
};
const NavigationCard = ({ type, themeName, className, onClick = () => undefined, }) => {
const { t } = useTranslations();
const iconUrl = useMemo(() => {
var _a, _b;
return ((_b = (_a = cardIconUrlMap[themeName]) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
}, [type, themeName]);
const iconBgColor = useMemo(() => {
if (themeName !== 'marryBaby') {
return 'transparent';
}
return iconBgColorMap[type];
}, [type, themeName]);
function handleCardClick() {
onClick(type);
}
return (React__default.createElement("div", { onClick: handleCardClick, className: `${styles$3.navigationCard} ${className}` },
React__default.createElement("div", { className: styles$3.navigationCardIconWrapper, style: {
backgroundColor: iconBgColor,
backgroundImage: `url("${iconUrl}")`,
} }),
React__default.createElement("h3", { className: styles$3.navigationCardLabel }, t(`userProfile.nav.card.${type}`))));
};
const navMenuItemsHelloSites = () => [
{
key: 'userProfile.nav.menu.accountSettings',
icon: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-settingsWheel.svg'),
subMenu: [
// {
// key: 'common.profileNavigator.newsletterSubscription',
// link: 'subscriptions',
// disableLocale: [
// 'id-ID',
// 'ms-MY',
// 'km-KH',
// 'en-PH',
// 'tl-PH',
// 'th-TH',
// 'my-MM',
// 'zh-TW',
// 'hi-IN',
// ],
// },
{
key: 'userProfile.nav.menu.password',
link: 'password',
},
{
key: 'userProfile.nav.menu.disableAccount',
link: 'disable-account',
disableLocale: ['hi-IN'],
},
{
key: 'userProfile.nav.menu.dataPrivacy',
link: 'data-privacy',
disableLocale: [
// 'id-ID',
'vi-VN',
'ms-MY',
'km-KH',
'en-PH',
'th-TH',
'my-MM',
'zh-TW',
'hi-IN',
'tl-PH',
// 'vi-VN_MB',
],
},
],
},
{
key: 'userProfile.nav.menu.help',
icon: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-helpCircle.svg'),
link: 'help',
},
];
const navMenuItemsMarryBaby = () => [
{
key: 'userProfile.nav.menu.password',
icon: CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-lock.svg'),
link: 'password',
},
{
key: 'userProfile.nav.menu.logout',
icon: CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-logOut.svg'),
link: 'logout',
},
];
var styles$2 = {"navMenu":"gn6HmGG","navMenuItem":"FCx8FEM","navMenuItemContent":"zMiRxaE","navMenuItemIcon":"lZ2Z9MQ","navMenuItemDropdown":"rwm-agG","navFooterSubMenu":"qMOscoq"};
const NavMenu = ({ themeName, locale, onClickItem }) => {
const [openKey, setOpenKey] = useState('');
const navMenuItems = useMemo(() => themeName === 'marryBaby'
? navMenuItemsMarryBaby()
: navMenuItemsHelloSites(), [themeName]);
function handleParentItemClick(item) {
if (item.subMenu) {
setOpenKey((k) => {
if (k) {
return '';
}
return item.key;
});
}
else if (onClickItem) {
onClickItem(item);
}
}
return (React__default.createElement("div", { className: styles$2.navMenu }, navMenuItems.map((item) => (React__default.createElement(NavMenuItem, { key: item.key, item: item, openKey: openKey, onClickItem: handleParentItemClick, locale: locale })))));
};
const NavMenuItem = ({ item, openKey, onClickItem, locale, }) => {
var _a;
const { t } = useTranslations();
if ((_a = item.disableLocale) === null || _a === void 0 ? void 0 : _a.includes(locale)) {
return null;
}
return (React__default.createElement("div", { className: `${styles$2.navMenuItem} nav-menu-item`, "data-is-open": openKey === item.key, key: item.key, "data-has-submenu": !!item.subMenu },
React__default.createElement("div", { className: styles$2.navMenuItemContent, onClick: () => onClickItem(item) },
item.icon && (React__default.createElement("div", { className: styles$2.navMenuItemIcon, style: { backgroundImage: `url("${item.icon}")` } })),
t(item.key),
item.subMenu && (React__default.createElement("div", { className: styles$2.navMenuItemDropdown, style: {
'--after-bg': `url(${CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronDown.svg')})`,
} }))),
item.subMenu && (React__default.createElement("div", { className: styles$2.navFooterSubMenu }, item.subMenu.map((subItem) => (React__default.createElement(NavMenuItem, { key: subItem.key, item: subItem, openKey: openKey, onClickItem: onClickItem, locale: locale })))))));
};
var styles$1 = {"userNavScreen":"-AZt1au","navigationCardsWrapper":"IvSIfCI","navigationCard":"eahCJov","logoutButton":"XIyViFs"};
var styles = {"userStats":"_4y-O0w3","wrapper":"kO8iNgD","header":"a1d4E10","headerIcon":"Tdguxxf","headerTitle":"-mOxsaU","headerPoints":"yPeDBNZ"};
const rankIconUrlMap = {
helloSites: {
member: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
ambassador: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
doctor: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
expert: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
influencer: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
},
marryBaby: {
member: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
ambassador: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
doctor: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
expert: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
influencer: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
},
};
const UserStats = ({ themeName, rank = 'member', numberOfPosts = 0, }) => {
const { t } = useTranslations();
const iconUrl = useMemo(() => {
var _a, _b;
return ((_b = (_a = rankIconUrlMap[themeName]) === null || _a === void 0 ? void 0 : _a[rank]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
}, [rank, themeName]);
return (React__default.createElement("div", { className: styles.userStats, "data-user-rank": rank },
React__default.createElement("div", { className: styles.wrapper },
React__default.createElement("div", { className: styles.header },
React__default.createElement("div", { className: styles.headerIcon, style: { backgroundImage: `url("${iconUrl}")` } }),
React__default.createElement("h3", { className: styles.headerTitle }, t(`userProfile.userRank.${rank}`)),
numberOfPosts > 0 && (React__default.createElement("p", { className: styles.headerPoints },
numberOfPosts,
" ",
t('userProfile.nav.header.count.posts')))))));
};
const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'helloSites', cardUrls = INTERNAL_CARD_URLS, enableCare, enableTogether, enableEcom, enableMySaved, userInfo, togetherApiDomain, userPostsNumber, onClickNavigationCard, onClickMyProfileButton, onClickMenuItem, onClickLogout, isUserProfileNavigatorMenuHidden = false, isMyHealthEnabled = false, locale, }) => {
const { t } = useTranslations();
const [numberOfPosts, setNumberOfPosts] = useState(userPostsNumber || 0);
const isMarryBaby = themeName === 'marryBaby';
useEffect(() => {
if (userInfo && typeof userPostsNumber === 'undefined') {
const token = getCookie('hhg_user_token');
if (!!token) {
fetch(normalizeLinkSlash(getTogetherUserPostsApiPath(locale, isMarryBaby, togetherApiDomain)), {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((r) => r.json())
.then((r) => {
var _a, _b, _c;
if ((r === null || r === void 0 ? void 0 : r.status) === 1 && ((_a = r === null || r === void 0 ? void 0 : r.data) === null || _a === void 0 ? void 0 : _a.pagination)) {
setNumberOfPosts(((_c = (_b = r === null || r === void 0 ? void 0 : r.data) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.total_items) || 0);
}
})
.catch((err) => console.error('Error fetching post number', err));
}
}
}, [
locale,
userInfo !== null,
userPostsNumber,
togetherApiDomain,
isMarryBaby,
]);
const cards = useMemo(() => {
let allCards;
if (isMarryBaby) {
allCards = ['myHealth', 'myCommunity', 'mySaved'];
}
else {
allCards = ['myHealth', 'mySaved', 'myBooking', 'myCommunity', 'eCom'];
}
return allCards.filter((cardType) => {
if (cardType === 'myBooking') {
return enableCare;
}
else if (cardType === 'myCommunity') {
return enableTogether;
}
else if (cardType === 'myHealth') {
return isMyHealthEnabled;
}
else if (cardType === 'eCom') {
return enableEcom;
}
else if (cardType === 'mySaved') {
return enableMySaved;
}
return true;
});
}, [isMarryBaby, isMyHealthEnabled]);
const logoutButton = useMemo(() => {
if (themeName === 'marryBaby') {
return null;
}
return (React__default.createElement(Button, { color: "tertiary", icon: React__default.createElement("img", { src: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-logOut.svg'), width: 15, height: 15, loading: "lazy" }), size: "md", onClick: onClickLogout, className: styles$1.logoutButton }, t('userProfile.nav.menu.logout')));
}, [themeName]);
const push = (link) => {
if (link.startsWith('http') || link.startsWith('/')) {
// direct to external link
window.location.href = normalizeLink(link);
}
else if (SSO_URL) {
// relative link go to user profile
window.location.href = normalizeLink(`${SSO_URL}${UP_BASEPATH}/${link}`);
}
};
const handleClickMenuItem = (item) => {
if (item.link === 'logout' && onClickLogout) {
onClickLogout();
}
else if (item.link && !item.subMenu) {
if (onClickMenuItem) {
onClickMenuItem(item.link);
}
else {
push(item.link);
}
}
};
const handleClickCardItem = (item) => {
const url = cardUrls[item];
if (onClickNavigationCard) {
onClickNavigationCard(url);
}
else {
push(url);
}
};
const handleClickViewProfile = () => {
if (onClickMyProfileButton) {
onClickMyProfileButton();
}
else {
push('profile');
}
};
if (!userInfo) {
return null;
}
return (React__default.createElement("div", { className: styles$1.userNavScreen, "data-theme": themeName },
React__default.createElement(NavHeader, { userInfo: userInfo, themeName: themeName, onClickMyProfileButton: handleClickViewProfile }),
React__default.createElement(UserStats, { themeName: themeName, rank: "member", numberOfPosts: numberOfPosts }),
React__default.createElement("div", { className: styles$1.navigationCardsWrapper }, cards.map((cardType) => (React__default.createElement(NavigationCard, { className: styles$1.navigationCard, key: cardType, themeName: themeName, type: cardType, onClick: handleClickCardItem })))),
!isUserProfileNavigatorMenuHidden && (React__default.createElement(React__default.Fragment, null,
React__default.createElement(NavMenu, { themeName: themeName, locale: locale, onClickItem: handleClickMenuItem }),
logoutButton))));
};
export { NavHeader as N, UserProfileNavigation as U, UserStats as a };