@hhgtech/hhg-components 1.29.420 → 1.29.422

package/build/index-d9a6289a.js

@@ -1,360 +0,0 @@
-'use strict';
-
-var React = require('react');
-var index = require('./index-ec2fee71.js');
-var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-e6a7d94d.js');
-var normalizeLink = require('./normalizeLink-7e7243da.js');
-var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-80035c0c.js');
-var index$3 = require('./index-2742d724.js');
-var index$4 = require('./index-fc751506.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;