@hhgtech/hhg-components/build/index-805b469c.js

Hello Health Group common components

'use strict';

var React = require('react');
var index = require('./index-c2c283f8.js');
var miscCookieHelper = require('./miscCookieHelper.js');
var index$2 = require('./index-db44e8cb.js');
var normalizeLink = require('./normalizeLink-4fe5440a.js');
var miscTheme = require('./miscTheme.js');
var index$1 = require('./index-e589665d.js');
var index$3 = require('./index-50c6f923.js');
var index$4 = require('./index-b9594844.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

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 } = index.useTranslations();
    const nameFirstLetter = React.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["default"].createElement("div", { className: styles$4.navHeader, onClick: handleClickMyProfileButton },
        React__default["default"].createElement(index$1.Avatar, { className: styles$4.navAvatar, type: "rounded", size: "xl", avatarUrl: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, firstLetter: nameFirstLetter, backgroundColor: themeName === 'marryBaby'
                ? miscTheme.theme.mbColors.pink
                : miscTheme.theme.colors.secondaryBase }),
        React__default["default"].createElement("div", { className: styles$4.navHeaderUserInfos },
            React__default["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["default"].createElement("div", { className: styles$4.navHeaderMyProfileButton, style: {
                    '--bg-hellosites': `url(${index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronRight.svg')})`,
                    '--bg-marrybaby': `url(${index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-arrowRight.svg')})`,
                } }, t('userProfile.nav.header.viewProfile')))));
}

var styles$3 = {"navigationCard":"fVk18fq","navigationCardLabel":"v8TCvUb","navigationCardIconWrapper":"mx7T4V3"};

const iconBgColorMap = {
    myHealth: miscTheme.theme.mbColors.toneYellow,
    myCommunity: miscTheme.theme.mbColors.toneBlue,
    mySaved: miscTheme.theme.mbColors.toneGreen,
};
// type CardIconUrlMap = IconUrlMap<UserProfileMenuCard>
const cardIconUrlMap = {
    helloSites: {
        myBooking: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myBooking.svg'),
        myCommunity: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myCommunity.svg'),
        myFamily: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myFamily.svg'),
        myHealth: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myHealth.svg'),
        mySaved: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-mySaved.svg'),
        eCom: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-eCom.svg'),
    },
    marryBaby: {
        mySaved: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-mySaved.svg'),
        myCommunity: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myCommunity.svg'),
        myHealth: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myHealth.svg'),
    },
};
const NavigationCard = ({ type, themeName, className, onClick = () => undefined, }) => {
    const { t } = index.useTranslations();
    const iconUrl = React.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 = React.useMemo(() => {
        if (themeName !== 'marryBaby') {
            return 'transparent';
        }
        return iconBgColorMap[type];
    }, [type, themeName]);
    function handleCardClick() {
        onClick(type);
    }
    return (React__default["default"].createElement("div", { onClick: handleCardClick, className: `${styles$3.navigationCard} ${className}` },
        React__default["default"].createElement("div", { className: styles$3.navigationCardIconWrapper, style: {
                backgroundColor: iconBgColor,
                backgroundImage: `url("${iconUrl}")`,
            } }),
        React__default["default"].createElement("h3", { className: styles$3.navigationCardLabel }, t(`userProfile.nav.card.${type}`))));
};

const navMenuItemsHelloSites = () => [
    {
        key: 'userProfile.nav.menu.accountSettings',
        icon: index$2.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: index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-helpCircle.svg'),
        link: 'help',
    },
];
const navMenuItemsMarryBaby = () => [
    {
        key: 'userProfile.nav.menu.password',
        icon: index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-lock.svg'),
        link: 'password',
    },
    {
        key: 'userProfile.nav.menu.logout',
        icon: index$2.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] = React.useState('');
    const navMenuItems = React.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["default"].createElement("div", { className: styles$2.navMenu }, navMenuItems.map((item) => (React__default["default"].createElement(NavMenuItem, { key: item.key, item: item, openKey: openKey, onClickItem: handleParentItemClick, locale: locale })))));
};
const NavMenuItem = ({ item, openKey, onClickItem, locale, }) => {
    var _a;
    const { t } = index.useTranslations();
    if ((_a = item.disableLocale) === null || _a === void 0 ? void 0 : _a.includes(locale)) {
        return null;
    }
    return (React__default["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["default"].createElement("div", { className: styles$2.navMenuItemContent, onClick: () => onClickItem(item) },
            item.icon && (React__default["default"].createElement("div", { className: styles$2.navMenuItemIcon, style: { backgroundImage: `url("${item.icon}")` } })),
            t(item.key),
            item.subMenu && (React__default["default"].createElement("div", { className: styles$2.navMenuItemDropdown, style: {
                    '--after-bg': `url(${index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronDown.svg')})`,
                } }))),
        item.subMenu && (React__default["default"].createElement("div", { className: styles$2.navFooterSubMenu }, item.subMenu.map((subItem) => (React__default["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: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
        ambassador: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
        doctor: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
        expert: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
        influencer: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
    },
    marryBaby: {
        member: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
        ambassador: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
        doctor: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
        expert: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
        influencer: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
    },
};
const UserStats = ({ themeName, rank = 'member', numberOfPosts = 0, }) => {
    const { t } = index.useTranslations();
    const iconUrl = React.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["default"].createElement("div", { className: styles.userStats, "data-user-rank": rank },
        React__default["default"].createElement("div", { className: styles.wrapper },
            React__default["default"].createElement("div", { className: styles.header },
                React__default["default"].createElement("div", { className: styles.headerIcon, style: { backgroundImage: `url("${iconUrl}")` } }),
                React__default["default"].createElement("h3", { className: styles.headerTitle }, t(`userProfile.userRank.${rank}`)),
                numberOfPosts > 0 && (React__default["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 } = index.useTranslations();
    const [numberOfPosts, setNumberOfPosts] = React.useState(userPostsNumber || 0);
    const isMarryBaby = themeName === 'marryBaby';
    React.useEffect(() => {
        if (userInfo && typeof userPostsNumber === 'undefined') {
            const token = miscCookieHelper.getCookie('hhg_user_token');
            if (!!token) {
                fetch(normalizeLink.normalizeLinkSlash(index$3.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 = React.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 = React.useMemo(() => {
        if (themeName === 'marryBaby') {
            return null;
        }
        return (React__default["default"].createElement(index$4.Button, { color: "tertiary", icon: React__default["default"].createElement("img", { src: index$2.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.normalizeLink(link);
        }
        else if (SSO_URL) {
            // relative link go to user profile
            window.location.href = normalizeLink.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["default"].createElement("div", { className: styles$1.userNavScreen, "data-theme": themeName },
        React__default["default"].createElement(NavHeader, { userInfo: userInfo, themeName: themeName, onClickMyProfileButton: handleClickViewProfile }),
        React__default["default"].createElement(UserStats, { themeName: themeName, rank: "member", numberOfPosts: numberOfPosts }),
        React__default["default"].createElement("div", { className: styles$1.navigationCardsWrapper }, cards.map((cardType) => (React__default["default"].createElement(NavigationCard, { className: styles$1.navigationCard, key: cardType, themeName: themeName, type: cardType, onClick: handleClickCardItem })))),
        !isUserProfileNavigatorMenuHidden && (React__default["default"].createElement(React__default["default"].Fragment, null,
            React__default["default"].createElement(NavMenu, { themeName: themeName, locale: locale, onClickItem: handleClickMenuItem }),
            logoutButton))));
};

exports.NavHeader = NavHeader;
exports.UserProfileNavigation = UserProfileNavigation;
exports.UserStats = UserStats;