@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/index-ec34e358.js

@@ -0,0 +1,343 @@
+'use strict';
+
+var React = require('react');
+var useTranslations = require('./useTranslations-685f989b.js');
+var cookieHelper = require('./cookieHelper-86ae022e.js');
+var index$1 = require('./index-64d8db08.js');
+var normalizeLink = require('./normalizeLink-d307f624.js');
+var theme = require('./theme-be20929b.js');
+var index = require('./index-53e14542.js');
+var index$2 = require('./index-d9919cd2.js');
+var index$3 = require('./index-f222ee45.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 } = useTranslations.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.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.theme.mbColors.pink
+                : theme.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$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronRight.svg')})`,
+                    '--bg-marrybaby': `url(${index$1.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.theme.mbColors.toneYellow,
+    myCommunity: theme.theme.mbColors.toneBlue,
+    mySaved: theme.theme.mbColors.toneGreen,
+};
+// type CardIconUrlMap = IconUrlMap<UserProfileMenuCard>
+const cardIconUrlMap = {
+    helloSites: {
+        myBooking: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myBooking.svg'),
+        myCommunity: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myCommunity.svg'),
+        myFamily: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myFamily.svg'),
+        myHealth: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myHealth.svg'),
+        mySaved: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-mySaved.svg'),
+        eCom: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-eCom.svg'),
+    },
+    marryBaby: {
+        mySaved: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-mySaved.svg'),
+        myCommunity: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myCommunity.svg'),
+        myHealth: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myHealth.svg'),
+    },
+};
+const NavigationCard = ({ type, themeName, className, onClick = () => undefined, }) => {
+    const { t } = useTranslations.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$1.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.help',
+        icon: index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-helpCircle.svg'),
+        link: 'help',
+    },
+];
+const navMenuItemsMarryBaby = () => [
+    {
+        key: 'userProfile.nav.menu.password',
+        icon: index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-lock.svg'),
+        link: 'password',
+    },
+    {
+        key: 'userProfile.nav.menu.logout',
+        icon: index$1.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 } = useTranslations.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$1.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$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
+        ambassador: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
+        doctor: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
+        expert: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
+        influencer: () => index$1.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
+    },
+    marryBaby: {
+        member: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
+        ambassador: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
+        doctor: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
+        expert: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
+        influencer: () => index$1.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
+    },
+};
+const UserStats = ({ themeName, rank = 'member', numberOfPosts = 0, }) => {
+    const { t } = useTranslations.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 } = useTranslations.useTranslations();
+    const [numberOfPosts, setNumberOfPosts] = React.useState(userPostsNumber || 0);
+    const isMarryBaby = themeName === 'marryBaby';
+    React.useEffect(() => {
+        if (userInfo && typeof userPostsNumber === 'undefined') {
+            const token = cookieHelper.getCookie('hhg_user_token');
+            if (!!token) {
+                fetch(normalizeLink.normalizeLinkSlash(index$2.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$3.Button, { color: "tertiary", icon: React__default["default"].createElement("img", { src: index$1.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;

package/build/{index-8c826f3e.js → index-f222ee45.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-4bc45883.js');
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
 var React = require('react');
-var index = require('./index-94fd9ea6.js');
+var index = require('./index-3eb666e6.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-2b32b21e.js → index-fd3e1d16.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-4bc45883.js');
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
 var React = require('react');
 var core = require('@mantine/core');
-var theme = require('./theme-f410baf6.js');
+var theme = require('./theme-be20929b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }