@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/index-8eb04f36.js

@@ -0,0 +1,130 @@
+import { _ as __rest } from './tslib.es6-06ba3978.js';
+import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
+import { createStyles, rem, Box, Flex } from '@mantine/core';
+import { R as Radio } from './index-9b3a8b6d.js';
+import '@mantine/dates';
+import './index-6210f454.js';
+import './index-189d7601.js';
+import { C as CommonGAssets } from './index-9471fca1.js';
+import './useMantineLocale-453f8013.js';
+import { T as Text } from './index-5723381f.js';
+import './index-1d3c6ce7.js';
+import './theme-7dadf4a1.js';
+import { u as useTranslations } from './useTranslations-b970f667.js';
+import '@mantine/hooks';
+import './utils-d7bbdb52.js';
+
+var useStyles = createStyles((theme, { type }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: {},
+        wrapper: Object.assign({ gap: rem(8) }, (type === 'radio' && {
+            justifyContent: 'flex-end',
+            gap: rem(24),
+        })),
+        groupErr: {
+            fontSize: rem(14),
+        },
+        itemRoot: Object.assign({}, (type === 'button'
+            ? {
+                flexGrow: 1,
+                width: '50%',
+                '&[data-checked="true"]': {
+                    '.mantine-Radio-label': {
+                        borderColor: theme.fn.primaryColor(),
+                    },
+                },
+            }
+            : type === 'radio'
+                ? { padding: `${rem(10)} 0`, margin: 0 }
+                : {})),
+        itemLabelWrapper: {
+            padding: 0,
+            width: '100%',
+        },
+        itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
+            ? {
+                position: 'relative',
+                padding: `${rem(6)} ${rem(16)}`,
+                border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
+                borderRadius: rem(isMarryBaby ? 16 : 4),
+                cursor: 'pointer',
+                '&[data-disabled="true"]': {
+                    background: theme.colors.gray[1],
+                    color: `${theme.colors.gray[4]} !important`,
+                    img: {
+                        opacity: 0.5,
+                    },
+                },
+                img: {
+                    height: rem(26),
+                },
+            }
+            : type === 'radio'
+                ? { fontSize: rem(14) }
+                : {})),
+        itemInner: Object.assign(Object.assign({}, (type === 'button' && {
+            display: 'none',
+        })), (type === 'radio' && {
+            alignSelf: 'center',
+        })),
+        itemBody: Object.assign({}, (type === 'radio' && {
+            alignItems: 'center',
+        })),
+    };
+});
+
+const GenderOptionControl = (_a) => {
+    var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
+        male: 'male',
+        female: 'female',
+    }, type = 'button', hideLabel } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
+    const { t } = useTranslations();
+    const { classes, cx, theme } = useStyles({ type }, {
+        name: 'GenderOptionControl',
+        styles,
+    });
+    const isMarryBaby = theme.other.template === 'mb';
+    const [availableValue, setAvailableValue] = useState();
+    const ref = useRef(null);
+    const genderOptions = useMemo(() => [
+        {
+            value: genderValue.male,
+            label: isBaby ? t('gender.boy') : t('gender.male'),
+            icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyBoyMB, null)) : (CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
+        },
+        {
+            value: genderValue.female,
+            label: isBaby ? t('gender.girl') : t('gender.female'),
+            icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyGirlMB, null)) : (CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
+        },
+    ], []);
+    useEffect(() => {
+        setAvailableValue(availableValueInit);
+    }, [availableValueInit]);
+    return (React__default.createElement(Box, { ref: ref, className: classes.root },
+        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, label ||
+                (isBaby
+                    ? t('tools.selectBabyGender')
+                    : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {
+                error: classes.groupErr,
+            } }, (type === 'radio' && {
+            error: null,
+        })),
+            React__default.createElement(Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default.createElement(Radio, Object.assign({ className: "gender-item", size: "sm", classNames: {
+                    root: classes.itemRoot,
+                    labelWrapper: classes.itemLabelWrapper,
+                    label: classes.itemLabel,
+                    inner: classes.itemInner,
+                    body: classes.itemBody,
+                }, key: i.value, value: i.value }, (availableValue &&
+                i.value !== availableValue && {
+                disabled: true,
+            }), { label: React__default.createElement(Flex, { gap: rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
+                    type === 'button' &&
+                        (typeof i.icon === 'string' ? (React__default.createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
+                    React__default.createElement(Text, { size: "p3" }, i.label)) }))))))));
+};
+
+export { GenderOptionControl as G };

package/build/esm/index-8fcf671c.js

@@ -0,0 +1,335 @@
+import React__default, { useMemo, useState, useEffect } from 'react';
+import { u as useTranslations } from './useTranslations-b970f667.js';
+import { g as getCookie } from './cookieHelper-6c3b4790.js';
+import { C as CommonGAssets } from './index-9471fca1.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-7a93ebb9.js';
+import { t as theme } from './theme-7dadf4a1.js';
+import { A as Avatar } from './index-0ee66974.js';
+import { d as getTogetherUserPostsApiPath } from './index-0cd3523c.js';
+import { B as Button } from './index-9b9c1499.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.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 };

package/build/esm/{index-80f4d7df.js → index-9471fca1.js}

@@ -1,5 +1,5 @@
-import { d as domainLocales } from './index-c807ef87.js';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import { d as domainLocales } from './index-6210f454.js';
+import { i as isProduction } from './isProduction-1937d355.js';
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';