@hhgtech/hhg-components 1.29.451-beta-3 → 1.29.451-beta-4

package/build/esm/index-87e4b77b.js

@@ -0,0 +1,565 @@
+import React__default, { useMemo, useEffect, useState, useContext, Fragment } from 'react';
+import { e as CARE_LOCALES, f as CARE_BOOKING_LOCALES, d as LOCALE_HAS_COMMUNITY_SITE, E as ECOM_LOCALES, c as VIDEO_LOCALES, D as DATA_PRIVACY_LOCALES } from './index-c27c139a.js';
+import { a as Avatar } from './index-2d6d0e4f.js';
+import '@mantine/core';
+import '@mantine/dates';
+import './index-df903dc3.js';
+import { C as CommonGAssets } from './index-10203a00.js';
+import './index-8860e91b.js';
+import { T as Text } from './index-c9abbed7.js';
+import './index-770d5df0.js';
+import './index-4bc68fd1.js';
+import './index.styles-a344d286.js';
+import { u as useTranslations } from './index-b853ce3b.js';
+import '@mantine/hooks';
+import './utils-4b0bcbf1.js';
+import './index-67e0ffa0.js';
+import { _ as __rest } from './tslib.es6-de55ba71.js';
+import { i as domainLocalesMarryBaby } from './utils-ab0cdd66.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLinkSlash } from './normalizeLink-f0721c13.js';
+import { domainLocales } from './constantsDomainLocales.js';
+import { C as ChevronDown } from './ChevronDown-0d00f841.js';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { theme } from './miscTheme.js';
+import './translationsContext-593be61a.js';
+
+const useNavConfig = ({ locale, projectType, siteType, enableBookingBtn, }) => {
+    const config = useMemo(() => {
+        const enableSearchBar = projectType === 'discover' ||
+            projectType === 'together' ||
+            projectType === 'marryBaby' ||
+            (projectType === 'profile' && siteType === 'marryBaby');
+        const enableNavCare = siteType !== 'marryBaby' &&
+            projectType !== 'marryBaby' &&
+            CARE_LOCALES.includes(locale);
+        const enableNavCareBooking = enableBookingBtn &&
+            projectType !== 'marryBaby' &&
+            projectType === 'discover' &&
+            siteType !== 'marryBaby' &&
+            CARE_BOOKING_LOCALES.includes(locale);
+        const enableNavTogether = projectType === 'marryBaby' || LOCALE_HAS_COMMUNITY_SITE.includes(locale);
+        const enableNavDiscover = true;
+        const enableNavHealthTools = true;
+        const enableProfileMySaved = true;
+        const enableNavEcom = siteType !== 'marryBaby' && ECOM_LOCALES.includes(locale);
+        const enableProfileEcom = siteType !== 'marryBaby' && ECOM_LOCALES.includes(locale);
+        const enableProfileMyHealth = true;
+        const enableNavVideo = VIDEO_LOCALES.includes(locale);
+        const baseUrl = getCurrentBaseUrl(locale, siteType === 'marryBaby');
+        let fixBaseUrl = baseUrl;
+        if (typeof window !== 'undefined') {
+            if (fixBaseUrl.includes('//id.'))
+                fixBaseUrl = fixBaseUrl.replace('id.', '');
+            if (fixBaseUrl.includes('//staging-id.'))
+                fixBaseUrl = fixBaseUrl.replace('staging-id.', 'discover.');
+        }
+        const ssoUrl = getCurrentSsoUrl(locale, siteType === 'marryBaby');
+        const statics = (() => {
+            return {
+                HOME_PAGE_URL: fixBaseUrl,
+                CARE_URL_FE: `${fixBaseUrl}/care`,
+                TOGETHER_URL_FE: `${fixBaseUrl}/community`,
+                VIDEO_URL_FE: `${fixBaseUrl}/videos`,
+                SSO_URL: ssoUrl,
+                TOGETHER_API: getTogetherApiDomain(),
+                DISCOVER_API: getDiscoverApiDomain(locale),
+            };
+        })();
+        return {
+            enableSearchBar,
+            enableNavCare,
+            enableNavCareBooking,
+            enableNavTogether,
+            enableNavEcom,
+            enableProfileEcom,
+            enableNavVideo,
+            enableProfileMyHealth,
+            enableNavDiscover,
+            enableNavHealthTools,
+            enableProfileMySaved,
+            statics,
+        };
+    }, []);
+    return config;
+};
+
+const NavigationContext = React__default.createContext({});
+const NavigationProvider = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const [currentUrl, setCurrentUrl] = React__default.useState(() => {
+        return (props.currentUrl ||
+            `https://${props.siteType === 'marryBaby'
+                ? domainLocalesMarryBaby[props.locale || 'en-PH']
+                : domainLocales[props.locale || 'en-PH']}${props.projectType === 'together'
+                ? '/community'
+                : props.projectType === 'ecom'
+                    ? '/ecom'
+                    : props.projectType === 'care'
+                        ? '/care'
+                        : ''}/`);
+    });
+    useEffect(() => {
+        const update = () => {
+            setCurrentUrl(window.location.href);
+        };
+        window.addEventListener('popstate', update);
+        update();
+        return () => {
+            window.removeEventListener('popstate', update);
+        };
+    }, []);
+    const configs = useNavConfig({
+        locale: props.locale,
+        projectType: props.projectType,
+        siteType: props.siteType,
+        enableBookingBtn: props.enableBookingBtn,
+    });
+    return (React__default.createElement(NavigationContext.Provider, { value: Object.assign(Object.assign({}, props), { customClasses: props.customClasses || {}, configs: Object.assign(Object.assign({}, configs), props.configs), currentUrl: props.currentUrl || currentUrl }) }, children));
+};
+
+const NavBookingIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M2.5 6.5a3.2 3.2 0 0 1 3.2-3.2h7.9a3.2 3.2 0 0 1 3.19 3.2v4.72a3.2 3.2 0 0 1-3.2 3.2H5.7a3.2 3.2 0 0 1-3.19-3.2V6.49Z", fill: "#E3F2FF" }),
+    React__default.createElement("path", { d: "M2.5 5.68A2.38 2.38 0 0 1 4.88 3.3h9.52a2.38 2.38 0 0 1 2.39 2.38z", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M13.6 2.5h-.03c-.36 0-.65.3-.65.65V4.2c0 .36.3.65.65.65h.03c.36 0 .65-.3.65-.65V3.15a.65.65 0 0 0-.65-.65M5.27 4.86h.03c.36 0 .65-.3.65-.65V3.15a.65.65 0 0 0-.65-.65h-.03c-.36 0-.65.3-.65.65V4.2c0 .36.3.65.65.65Z", fill: "#2743AD" }),
+    React__default.createElement("path", { d: "M5.56 8.17h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m2.7 0h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m2.7 0h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m2.87 0h-.49a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.49a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m-8.3 2.52h-.5a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4m2.7 0h-.5a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4m2.7 0h-.49a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Zm2.87 0h-.49a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Z", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M16 16.8a3.17 3.17 0 1 0 0-6.36 3.17 3.17 0 0 0 0 6.35Z", fill: "#FE921D" }),
+    React__default.createElement("path", { d: "M15.78 13.62v-1.36a.21.21 0 0 1 .42 0v1.26l.48.4a.21.21 0 0 1-.01.33.21.21 0 0 1-.26-.01l-.55-.46-.02-.01a.2.2 0 0 1-.06-.15", fill: "#fff" })));
+
+const NavCommunityIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M7.06 4.97h-2.3a3.12 3.12 0 0 0-3.1 3.1v.43a3.12 3.12 0 0 0 3.1 3.1h1.39s1.47 1.11 1.5.97c.03-.22-.23-.99-.23-.99a3.13 3.13 0 0 0 2.72-3.09v-.41a3.12 3.12 0 0 0-3.08-3.11m-2.7 3.55a.23.23 0 1 1 0-.46.23.23 0 0 1 0 .46m1.35.4a.33.33 0 1 1 0-.66.33.33 0 0 1 0 .65Zm1.57-.05", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M12.88 9.52a3.53 3.53 0 0 0-1.35 6.8s-.23 1.03-.2 1.25c.03.14 1.55-.99 1.55-.99a3.53 3.53 0 0 0 0-7.06m-1.33 4.24a.48.48 0 1 1 0-.97.48.48 0 0 1 0 .97m1.58.04a.33.33 0 1 1 0-.66.33.33 0 0 1 0 .66m1.34-.39a.23.23 0 1 1 0-.46.23.23 0 0 1 0 .46", fill: "#FFB521" }),
+    React__default.createElement("path", { d: "M16.45 1.67h-3.87a1.88 1.88 0 0 0-1.88 2.06l.22 2.29a1.88 1.88 0 0 0 1.73 1.7s-.17.94-.14 1.16c.02.14 1.66-1.13 1.66-1.13l1.92-.03a1.88 1.88 0 0 0 1.86-1.59l.36-2.29a1.88 1.88 0 0 0-1.86-2.17M13.1 5.23a.48.48 0 1 1 .34-.14c-.1.1-.22.14-.34.14m1.57.05a.33.33 0 1 1 .23-.1.33.33 0 0 1-.23.1m1.34-.4a.23.23 0 1 1 .1-.01.2.2 0 0 1-.1.02Z", fill: "#91CAFF" })));
+
+const NavDotIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("rect", { x: "8.333", y: "8.333", width: "3.333", height: "3.333", rx: "1.667", fill: "#2D87F3" })));
+
+const NavEshopIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "m3.18 7.06 1.6 1.6 4.33-4.69a.72.72 0 0 0-.03-.99l-.22-.22a.72.72 0 0 0-.99-.02zm13.64 0-1.6 1.6-4.33-4.69a.72.72 0 0 1 .02-.99l.23-.22a.72.72 0 0 1 .99-.02z", fill: "#2743AD" }),
+    React__default.createElement("path", { d: "M15.04 16.7H4.9a.78.78 0 0 1-.77-.7l-.7-6.67h13.09l-.7 6.67a.78.78 0 0 1-.78.7", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M6.23 15.7a.23.23 0 0 1-.23-.22l-.3-4.46a.23.23 0 1 1 .47-.04l.3 4.47a.23.23 0 0 1-.22.25zm2.39 0a.23.23 0 0 1-.23-.23L8.3 11a.23.23 0 1 1 .47 0l.07 4.46a.23.23 0 0 1-.22.24h-.01Zm5.15 0h-.02a.23.23 0 0 1-.2-.16.2.2 0 0 1-.02-.09l.3-4.47a.24.24 0 0 1 .25-.22.23.23 0 0 1 .22.26l-.3 4.46a.23.23 0 0 1-.23.22m-2.39 0a.23.23 0 0 1-.23-.23l.07-4.47a.24.24 0 0 1 .24-.23.23.23 0 0 1 .23.23l-.08 4.47a.23.23 0 0 1-.23.23", fill: "#2743AD" }),
+    React__default.createElement("path", { d: "M16.04 18.12a2.01 2.01 0 1 0 0-4.03 2.01 2.01 0 0 0 0 4.03", fill: "#FE921D" }),
+    React__default.createElement("path", { d: "M16.97 15.87h-.7v-.7a.23.23 0 0 0-.46 0v.7h-.7a.23.23 0 1 0 0 .47h.7v.69a.23.23 0 1 0 .47 0v-.7h.69a.23.23 0 1 0 0-.46", fill: "#fff" }),
+    React__default.createElement("path", { d: "M16.58 9.48H3.42a.8.8 0 0 1-.78-.7l-.13-1.1a.8.8 0 0 1 .78-.88h13.42a.8.8 0 0 1 .78.88l-.13 1.1a.8.8 0 0 1-.78.7", fill: "#BCDEFF" })));
+
+const NavHelpIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M10 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm0 13.194a.695.695 0 1 1 0-1.39.695.695 0 0 1 0 1.39Zm1.1-4.415a.698.698 0 0 0-.405.631v.312a.694.694 0 1 1-1.39 0v-.312c0-.81.477-1.553 1.213-1.893.707-.326 1.218-1.19 1.218-1.615 0-.956-.778-1.736-1.736-1.736s-1.736.78-1.736 1.736a.694.694 0 1 1-1.389 0A3.129 3.129 0 0 1 10 4.444a3.129 3.129 0 0 1 3.125 3.125c0 .939-.814 2.318-2.026 2.877Z", fill: "#FF6F4D" })));
+
+const NavLogOutIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M11.116 1.72 5.488.85a1.898 1.898 0 0 0-2.155 1.856v14.588a1.898 1.898 0 0 0 2.158 1.855l5.625-.869a1.865 1.865 0 0 0 1.592-1.855V3.575a1.87 1.87 0 0 0-1.592-1.855", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M17.642 9.584a.6.6 0 0 1-.232.472l-1.964 1.518a.446.446 0 0 1-.719-.353v-.51l-2.118-.01a.225.225 0 0 1-.223-.225v-1.8a.225.225 0 0 1 .224-.225l2.12.002-.004-.506a.446.446 0 0 1 .719-.354l1.965 1.52a.6.6 0 0 1 .232.471", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M17.642 9.584a.6.6 0 0 1-.232.472l-1.964 1.518a.446.446 0 0 1-.719-.353v-.51l-2.118-.01a.225.225 0 0 1-.223-.225v-1.8a.225.225 0 0 1 .224-.225l2.12.002-.004-.506a.446.446 0 0 1 .719-.354l1.965 1.52a.6.6 0 0 1 .232.471m-7.603-.908v1.802c0 .124.1.225.224.225h1.257c.124 0 .225-.1.225-.225V8.676c0-.124-.1-.224-.225-.224h-1.257c-.124 0-.224.1-.224.224m-.673 1.809a.224.224 0 0 1-.225.225h-.407a.61.61 0 0 1-.609-.61V9.069a.61.61 0 0 1 .61-.61h.406a.224.224 0 0 1 .225.225z", fill: "#FF6F4D" })));
+
+const NavMyHealthIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M6.114 3.333a4.64 4.64 0 0 1 3.565 1.708.412.412 0 0 0 .642 0 4.64 4.64 0 0 1 3.565-1.708c2.646 0 4.447 2.302 4.447 5.142 0 1.698-.904 4.446-2.675 6.102-2.522 2.358-4.665 2.965-5.392 3.11a1.3 1.3 0 0 1-.53 0c-.728-.146-2.871-.752-5.393-3.11-1.772-1.656-2.676-4.404-2.676-6.102 0-2.84 1.801-5.142 4.447-5.142", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M13.298 11.226v-.829a1.205 1.205 0 0 0-1.202-1.204h-.208a.26.26 0 0 1-.261-.259v-.208a1.205 1.205 0 0 0-1.201-1.204h-.832A1.205 1.205 0 0 0 8.39 8.726v.205a.26.26 0 0 1-.259.261h-.207a1.2 1.2 0 0 0-1.202 1.202v.834a1.204 1.204 0 0 0 1.202 1.201h.207a.26.26 0 0 1 .259.262v.205A1.205 1.205 0 0 0 9.594 14.1h.832a1.204 1.204 0 0 0 1.201-1.204v-.208a.26.26 0 0 1 .261-.258h.208a1.205 1.205 0 0 0 1.202-1.204", fill: "#fff" })));
+
+const NavSaveIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M4.767 17.236a1.36 1.36 0 0 0 1.256.188l4.097-1.397a.37.37 0 0 1 .28 0l4.097 1.397q.22.071.45.075c.29.002.573-.09.807-.263a1.43 1.43 0 0 0 .6-1.171V3.935A1.417 1.417 0 0 0 14.946 2.5H5.573a1.416 1.416 0 0 0-1.406 1.434v12.13a1.43 1.43 0 0 0 .6 1.172", fill: "#00CB8A" })));
+
+const NavSettingsIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M17.339 8.075a2.177 2.177 0 0 1-1.717-2.944 1.02 1.02 0 0 0-.305-1.15 8.2 8.2 0 0 0-2.445-1.417 1.03 1.03 0 0 0-1.16.323 2.173 2.173 0 0 1-3.423 0 1.03 1.03 0 0 0-1.161-.323A8.2 8.2 0 0 0 4.85 3.842a1.03 1.03 0 0 0-.322 1.183 2.167 2.167 0 0 1-1.806 2.978 1.03 1.03 0 0 0-.9.828 8 8 0 0 0-.05 2.861 1.03 1.03 0 0 0 .906.861 2.166 2.166 0 0 1 1.767 3.061 1.01 1.01 0 0 0 .283 1.211A8.2 8.2 0 0 0 7.15 18.22q.17.059.35.061a1.02 1.02 0 0 0 .833-.433 2.15 2.15 0 0 1 1.778-.934 2.18 2.18 0 0 1 1.745.878 1.02 1.02 0 0 0 1.2.339 8.3 8.3 0 0 0 2.222-1.328 1.03 1.03 0 0 0 .3-1.172 2.167 2.167 0 0 1 1.739-2.995 1.03 1.03 0 0 0 .872-.844 8 8 0 0 0 .144-1.405q0-.749-.138-1.484a1.02 1.02 0 0 0-.856-.828m-4.561 2.312a2.778 2.778 0 1 1-5.556 0 2.778 2.778 0 0 1 5.556 0", fill: "#2D87F3" })));
+
+const NavUserIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M10 19.167A9.167 9.167 0 1 0 10 .833a9.167 9.167 0 0 0 0 18.334", fill: "#BCDEFF" }),
+    React__default.createElement("path", { d: "M17.356 15.463a9.188 9.188 0 0 0-14.716-.005 9.155 9.155 0 0 0 14.716.005", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M10 10.591a3.548 3.548 0 1 0 0-7.096 3.548 3.548 0 0 0 0 7.096", fill: "#2D87F3" })));
+
+const VaccinationIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React__default.createElement("path", { d: "M1.11848 19.1667C1.19427 19.1666 1.26693 19.1365 1.32049 19.0829L4.30733 16.0962C4.36096 16.0426 4.3911 15.9699 4.39111 15.8941C4.39113 15.8183 4.36103 15.7455 4.30743 15.6919C4.25383 15.6383 4.18112 15.6081 4.1053 15.6081C4.02948 15.6081 3.95675 15.6382 3.90313 15.6918L0.916285 18.6787C0.876281 18.7186 0.849035 18.7696 0.837994 18.825C0.826954 18.8805 0.832614 18.938 0.854261 18.9903C0.875908 19.0425 0.912567 19.0872 0.9596 19.1186C1.00663 19.15 1.06193 19.1667 1.11848 19.1667Z", fill: "#626D7C" }),
+    React__default.createElement("path", { d: "M7.71853 15.4925H7.72043L15.3384 7.87534L12.1272 4.66228L4.45021 12.3366C5.39488 13.2971 7.71853 15.4925 7.71853 15.4925Z", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M3.18097 14.9702L5.02953 16.8187C5.19838 16.9989 5.43172 17.1049 5.67851 17.1135C5.9253 17.122 6.16544 17.0325 6.34638 16.8645L7.71851 15.4923L4.50736 12.2793L3.13524 13.6514C2.96661 13.8324 2.87671 14.073 2.88529 14.3203C2.89386 14.5675 3.00021 14.8013 3.18097 14.9702Z", fill: "#BCDEFF" }),
+    React__default.createElement("path", { d: "M17.7683 3.58334L16.4183 2.2333L13.5601 5.09143L14.9102 6.44147L17.7683 3.58334Z", fill: "#2B62CD" }),
+    React__default.createElement("path", { d: "M7.71889 15.7783C7.77545 15.7783 7.83074 15.7616 7.87778 15.7301C7.92481 15.6987 7.96147 15.6541 7.98312 15.6018C8.00476 15.5496 8.01042 15.4921 7.99938 15.4366C7.98834 15.3811 7.9611 15.3302 7.92109 15.2902L4.70861 12.0779C4.65452 12.0268 4.58261 11.9988 4.50818 11.9998C4.43375 12.0009 4.36267 12.0309 4.31005 12.0836C4.25742 12.1362 4.22741 12.2073 4.22639 12.2817C4.22538 12.3562 4.25343 12.4281 4.3046 12.4821L7.51689 15.6944C7.54337 15.721 7.57485 15.7421 7.60952 15.7565C7.64419 15.7709 7.68136 15.7783 7.71889 15.7783Z", fill: "#BCDEFF" }),
+    React__default.createElement("path", { d: "M9.48781 11.3095C9.54746 11.3096 9.60653 11.2978 9.66161 11.2749C9.71669 11.252 9.76669 11.2184 9.80874 11.1761L9.83847 11.1462L9.86819 11.1758C9.95336 11.2609 10.0689 11.3088 10.1893 11.3088C10.3098 11.3088 10.4253 11.2609 10.5104 11.1758L10.8535 10.8327C10.8957 10.7905 10.9291 10.7404 10.952 10.6853C10.9748 10.6302 10.9866 10.5711 10.9866 10.5114C10.9866 10.4517 10.9748 10.3926 10.952 10.3375C10.9291 10.2824 10.8957 10.2323 10.8535 10.1901L10.8232 10.1625L10.8531 10.1326C10.9382 10.0474 10.9861 9.93182 10.9861 9.81135C10.9861 9.69087 10.9382 9.57533 10.8531 9.49014L10.51 9.14711C10.4679 9.10487 10.4179 9.07136 10.3628 9.0485C10.3077 9.02563 10.2486 9.01386 10.1889 9.01386C10.1293 9.01386 10.0702 9.02563 10.0151 9.0485C9.96 9.07136 9.90995 9.10487 9.86781 9.14711L9.83808 9.17664L9.80836 9.14692C9.72313 9.06179 9.6076 9.01397 9.48715 9.01397C9.36669 9.01397 9.25116 9.06179 9.16594 9.14692L8.8229 9.48995C8.73774 9.57511 8.6899 9.69062 8.6899 9.81106C8.6899 9.9315 8.73774 10.047 8.8229 10.1322L8.85282 10.1621L8.82329 10.1918C8.73826 10.2771 8.69052 10.3925 8.69052 10.5129C8.69052 10.6333 8.73826 10.7488 8.82329 10.8341L9.16632 11.1771C9.2085 11.2193 9.25863 11.2528 9.31381 11.2755C9.36899 11.2982 9.42813 11.3098 9.48781 11.3095Z", fill: "white" }),
+    React__default.createElement("path", { d: "M12.6184 3.4438L16.5573 7.38277C16.8001 7.6255 16.8001 8.01905 16.5573 8.26178C16.3146 8.50451 15.921 8.50451 15.6783 8.26178L11.7393 4.32281C11.4966 4.08008 11.4966 3.68653 11.7393 3.4438C11.9821 3.20107 12.3756 3.20107 12.6184 3.4438Z", fill: "#BCDEFF" }),
+    React__default.createElement("path", { d: "M16.4563 1.22324L18.7767 3.54364C18.9921 3.75907 18.9921 4.10834 18.7767 4.32376C18.5613 4.53918 18.212 4.53918 17.9966 4.32376L15.6762 2.00336C15.4608 1.78793 15.4608 1.43866 15.6762 1.22324C15.8916 1.00782 16.2409 1.00782 16.4563 1.22324Z", fill: "#BCDEFF" })));
+
+const StyledNavMenu = styled.div `
+  padding: 16px;
+  border-radius: 16px;
+  background-color: white;
+  hr {
+    border-color: ${theme.colors.neutral100};
+    border-bottom-width: 0px;
+    border-style: solid;
+  }
+  .profile-nav-item-group {
+    background-color: white;
+    border-radius: 8px;
+  }
+`;
+const StyledNavMenuItem = styled.div `
+  display: block;
+  border: 1px solid transparent;
+  transition: all 300ms linear;
+  cursor: pointer;
+  position: relative;
+
+  ${(props) => props.hasSubmenu &&
+    css `
+      cursor: pointer;
+    `}
+
+  &[data-is-open='true'] {
+    & + div {
+      margin-top: 8px;
+    }
+  }
+
+  border-left-width: 0;
+  border-right-width: 0;
+  &[data-is-open='true'] {
+    & + div {
+      margin-top: 0;
+    }
+    .nav-menu-item:last-child {
+      border-bottom-color: ${theme.colors.neutral100};
+    }
+  }
+  .nav-menu-item {
+    background-color: ${theme.colors.neutral50};
+  }
+
+  .nav-menu-item {
+    padding-left: 38px;
+  }
+`;
+const StyledNavMenuItemContent = styled.div `
+  display: flex;
+  align-items: center;
+  height: 48px;
+  border: 1px solid transparent;
+  transition: all 300ms;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: ${theme.colors.neutral150};
+  }
+  &[data-active='true'] {
+    background-color: ${theme.colors.blue50};
+  }
+`;
+const StyledNavMenuItemDropdown = styled.div `
+  margin-left: auto;
+
+  svg {
+    fill: ${theme.colors.gray600};
+    transition: transform 300ms;
+  }
+
+  &[data-is-open='true'] svg {
+    transform: rotate(180deg);
+  }
+`;
+const StyledNavFooterSubMenu = styled.div `
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.3s ease-out;
+
+  [data-is-open='true'] & {
+    max-height: 500px;
+    transition-timing-function: ease-in;
+  }
+`;
+
+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 Rank = ({ rank, siteType = 'helloSites', }) => {
+    const iconUrl = useMemo(() => {
+        var _a, _b;
+        return ((_b = (_a = rankIconUrlMap[siteType]) === null || _a === void 0 ? void 0 : _a[rank]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
+    }, [rank, siteType]);
+    const { t } = useTranslations();
+    return (React__default.createElement("div", { style: {
+            display: 'inline-flex',
+            height: 'fit-content',
+            alignItems: 'center',
+            padding: '5px 12px',
+            gap: '4px',
+            borderRadius: 16,
+            border: `1px solid ${siteType === 'helloSites' ? theme.colors.blue100 : theme.colors.mb100}`,
+        } },
+        React__default.createElement("img", { src: iconUrl, alt: rank, style: {
+                height: 16,
+                width: 16,
+            } }),
+        React__default.createElement(Text, { size: "s5", color: "gray.8", weight: "semiBold" }, t(`userProfile.userRank.${rank}`))));
+};
+
+const UserInfoSection = ({ siteType = 'helloSites', userInfo, }) => {
+    return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'space-between',
+            } },
+            React__default.createElement(Avatar, { src: userInfo.avatar, alt: userInfo.name, size: 48, style: { marginBottom: 8 } }),
+            React__default.createElement(Rank, { rank: "member", siteType: siteType })),
+        React__default.createElement(Text, { size: "s3", weight: "semiBold", color: "gray.8", style: { marginBottom: 4 } }, userInfo.name),
+        React__default.createElement(Text, { size: "n1", weight: "regular", color: siteType === 'helloSites' ? 'hb.6' : 'mb.6' },
+            "@",
+            userInfo.username),
+        React__default.createElement("hr", null))) : null;
+};
+
+const ProfileNavigation = ({ className, activeItem: forceActiveItem, navMenuItems: navMenuItemsProp, style, onLogout, siteType = 'helloSites', userInfo, onNavigate, }) => {
+    const { locale } = useTranslations();
+    const [localActiveItem, setLocalActiveItem] = useState();
+    const { configs: { enableProfileFindMyBooking, statics }, } = useContext(NavigationContext);
+    const { CARE_URL_FE } = statics;
+    const activeItem = typeof forceActiveItem === 'string' ? forceActiveItem : localActiveItem;
+    const SSO_URL = normalizeLinkSlash(getCurrentSsoUrl(locale, siteType === 'marryBaby') + '/');
+    const BASE_URL = normalizeLinkSlash(getCurrentBaseUrl(locale, siteType === 'marryBaby') + '/');
+    const navMenuItems = navMenuItemsProp || [
+        [
+            {
+                key: 'userProfile.nav.header.viewProfile',
+                icon: React__default.createElement(NavUserIcon, { width: "24", height: "24" }),
+                value: 'profile',
+                tracking: {
+                    action: 'Profile Click',
+                },
+                link: `${SSO_URL}user/profile/`,
+            },
+            {
+                key: 'userProfile.nav.card.myHealth',
+                icon: React__default.createElement(NavMyHealthIcon, { width: "24", height: "24" }),
+                value: 'myHealth',
+                tracking: {
+                    action: 'My Health Click',
+                },
+                link: `${SSO_URL}user/health/`,
+            },
+            {
+                key: 'userProfile.nav.card.mySaved',
+                icon: React__default.createElement(NavSaveIcon, { width: "24", height: "24" }),
+                iconColor: 'green_300',
+                value: 'saved',
+                tracking: {
+                    action: 'Bookmarks Click',
+                },
+                link: `${SSO_URL}user/saved/`,
+            },
+            !!enableProfileFindMyBooking && {
+                key: 'navigation.find_my_booking',
+                icon: React__default.createElement(VaccinationIcon, { width: "24", height: "24" }),
+                value: 'find_my_booking',
+                tracking: {
+                    action: 'Find My Booking',
+                },
+                link: `${CARE_URL_FE}/find-my-booking`,
+            },
+            {
+                key: 'userProfile.nav.card.myBooking',
+                icon: React__default.createElement(NavBookingIcon, { width: "24", height: "24" }),
+                value: 'booking',
+                disabled: !CARE_LOCALES.includes(locale),
+                tracking: {
+                    action: 'Manage Booking Click',
+                },
+                link: `${SSO_URL}user/booking/`,
+            },
+            {
+                key: 'userProfile.nav.card.myCommunity',
+                icon: React__default.createElement(NavCommunityIcon, { width: "24", height: "24" }),
+                value: 'myCommunities',
+                disabled: !LOCALE_HAS_COMMUNITY_SITE.includes(locale),
+                tracking: {
+                    action: 'Community Click',
+                },
+                link: `${SSO_URL}user/my-communities/`,
+            },
+        ],
+        ...(ECOM_LOCALES.includes(locale)
+            ? [
+                [
+                    {
+                        key: 'userProfile.nav.card.eCom',
+                        icon: React__default.createElement(NavEshopIcon, { width: "24", height: "24" }),
+                        value: 'eCom',
+                        disabled: !ECOM_LOCALES.includes(locale),
+                        subMenu: [
+                            {
+                                key: 'userProfile.nav.card.ecom.manageOrders',
+                                value: 'eCom-manageOrders',
+                                icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                                link: `${BASE_URL}shop/ho-so/quan-li-don-hang/`,
+                                tracking: {
+                                    action: 'Order Management Click',
+                                },
+                            },
+                            {
+                                key: 'userProfile.nav.card.ecom.DeliveryAddress',
+                                value: 'eCom-manageAddress',
+                                icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                                link: `${BASE_URL}shop/ho-so/dia-chi-giao-hang/`,
+                                tracking: {
+                                    action: 'Address Management Click',
+                                },
+                            },
+                            {
+                                key: 'userProfile.nav.card.ecom.voucher',
+                                value: 'eCom-voucher',
+                                icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                                link: `${BASE_URL}shop/ho-so/khuyen-mai/`,
+                                tracking: {
+                                    action: 'Voucher Click',
+                                },
+                            },
+                            // {
+                            //   key: 'nav.card.memberCard',
+                            //   value: 'eCom-memberCard',
+                            //   icon: <NavDotIcon   width="24"
+                            // height="24"/>,
+                            //   link: routingHandler
+                            //     .getLocalisedUrl('', 'PROFILE_MEMBER_CARD')
+                            //     .toString(),
+                            //   tracking: {
+                            //     action: 'Member Card Click',
+                            //   },
+                            // },
+                        ],
+                    },
+                ],
+            ]
+            : []),
+        [
+            {
+                key: 'userProfile.nav.menu.accountSettings',
+                icon: React__default.createElement(NavSettingsIcon, { width: "24", height: "24" }),
+                subMenu: [
+                    // {
+                    //   key: 'common.profileNavigator.newsletterSubscription',
+                    //   value: 'subscription',
+                    //   icon: <NavDotIcon width="24" height="24" />,
+                    //   tracking: { action: 'Subscription Click' },
+                    //   link: `${SSO_URL}user/subscriptions/`,
+                    //   disabled: locale !== 'vi-VN',
+                    // },
+                    {
+                        key: 'userProfile.nav.menu.password',
+                        value: 'password',
+                        icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                        tracking: { action: 'Set Password Click' },
+                        link: `${SSO_URL}user/password/`,
+                    },
+                    {
+                        key: 'userProfile.nav.menu.disableAccount',
+                        value: 'disable-account',
+                        icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                        tracking: { action: 'Disable Account Click' },
+                        link: `${SSO_URL}user/disable-account/`,
+                    },
+                    ...(DATA_PRIVACY_LOCALES.includes(locale)
+                        ? [
+                            {
+                                key: 'userProfile.nav.menu.dataPrivacy',
+                                value: 'data-privacy',
+                                icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                                tracking: { action: 'Data Privacy Click' },
+                                link: `${SSO_URL}user/data-privacy/`,
+                            },
+                        ]
+                        : []),
+                ],
+            },
+        ],
+        [
+            {
+                key: 'userProfile.nav.menu.help',
+                icon: React__default.createElement(NavHelpIcon, { width: "24", height: "24" }),
+                value: 'help',
+                link: `${SSO_URL}user/help`,
+                tracking: {
+                    action: 'Support Click',
+                },
+            },
+            {
+                key: 'userProfile.nav.menu.logout',
+                icon: React__default.createElement(NavLogOutIcon, { width: "24", height: "24" }),
+                value: 'logout',
+                tracking: {
+                    action: 'Sign Out Click',
+                },
+            },
+        ],
+    ];
+    return (React__default.createElement(StyledNavMenu, { className: className, style: style },
+        React__default.createElement(UserInfoSection, { userInfo: userInfo, siteType: siteType }),
+        navMenuItems.map((items, index) => (React__default.createElement(Fragment, { key: index },
+            React__default.createElement("div", { className: "profile-nav-item-group", key: index }, items.map((item) => {
+                if (!item) {
+                    return null;
+                }
+                return (React__default.createElement(NavMenuItem, { key: item.key, item: item, activeKey: activeItem || '', onLogout: onLogout, onClick: () => setLocalActiveItem((k) => k === item.key ? undefined : item.key), siteType: siteType, onNavigate: onNavigate }));
+            })),
+            index !== navMenuItems.length - 1 && React__default.createElement("hr", null))))));
+};
+const NavMenuItem = ({ item, activeKey, forceOpen, onLogout, onClick, siteType = 'helloSites', onNavigate, }) => {
+    var _a, _b;
+    const [localOpen, setLocalOpen] = useState(false);
+    const currentUrl = useMemo(() => {
+        if (typeof window !== 'undefined') {
+            return window.location.href;
+        }
+        else
+            return '';
+    }, []);
+    if (item.disabled) {
+        return null;
+    }
+    const { t } = useTranslations();
+    const hasChildActive = (_a = item.subMenu) === null || _a === void 0 ? void 0 : _a.some((subItem) => subItem.key === activeKey);
+    const isActive = activeKey === item.key;
+    useEffect(() => {
+        if (hasChildActive || isActive) {
+            setLocalOpen(true);
+        }
+    }, [hasChildActive, isActive]);
+    const isOpen = typeof forceOpen === 'boolean' ? forceOpen : localOpen;
+    return (React__default.createElement(StyledNavMenuItem, { as: !item.subMenu ? 'a' : undefined, "data-is-open": isOpen, key: item.key, hasSubmenu: !!item.subMenu, onClick: () => {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            if (item.subMenu && !forceOpen) {
+                setLocalOpen((k) => !k);
+            }
+            else {
+                if (item.value === 'logout') {
+                    onLogout === null || onLogout === void 0 ? void 0 : onLogout();
+                }
+                else if (item.link) {
+                    if (onNavigate) {
+                        onNavigate(item.link);
+                    }
+                    else {
+                        window.location.href = item.link;
+                    }
+                }
+            }
+        }, "data-event-category": "Ecommerce", "data-event-action": ((_b = item === null || item === void 0 ? void 0 : item.tracking) === null || _b === void 0 ? void 0 : _b.action) || '', "data-event-label": currentUrl },
+        React__default.createElement(StyledNavMenuItemContent, { "data-active": isActive },
+            item.icon,
+            React__default.createElement(Text, { size: "p3", style: {
+                    marginLeft: item.icon ? 24 : 48,
+                    transition: `color 300ms`,
+                }, color: isActive ? (siteType === 'helloSites' ? 'hb.6' : 'mb.6') : 'gray.8' }, t(item.key)),
+            item.subMenu && (React__default.createElement(StyledNavMenuItemDropdown, { "data-is-open": isOpen },
+                React__default.createElement(ChevronDown, { width: 14 })))),
+        item.subMenu && (React__default.createElement(StyledNavFooterSubMenu, null, item.subMenu.map((subItem) => (React__default.createElement(NavMenuItem, { key: subItem.key, item: subItem, activeKey: activeKey, onLogout: onLogout, siteType: siteType })))))));
+};
+
+export { NavigationContext as N, ProfileNavigation as P, NavigationProvider as a };

package/build/esm/{index-3f1e4481.js → index-8860e91b.js}

@@ -1,16 +1,16 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-c2b3a995.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-de55ba71.js';
 import React__default, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import './index-93c30877.js';
-import { L as LOCALE } from './Locale-5f22dd8f.js';
+import './index-df903dc3.js';
+import { L as LOCALE } from './Locale-10bedfb7.js';
 import { notifications, Notifications } from '@mantine/notifications';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-16a2abc0.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-c27c139a.js';
 import { em } from '@mantine/core';
-import { C as CommonGAssets } from './index-701a6941.js';
+import { C as CommonGAssets } from './index-10203a00.js';
 import { theme } from './miscTheme.js';
-import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-4677ee5f.js';
-import { C as CustomStylesType, F as FontWeight } from './index-1777aed9.js';
-import { A as ANIMATION_DURATION } from './shared-4b21a422.js';
+import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-4b0bcbf1.js';
+import { C as CustomStylesType, F as FontWeight } from './index-4bc68fd1.js';
+import { A as ANIMATION_DURATION } from './shared-a443fd2e.js';
 
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const MAPPED_LOCALE = {

package/build/esm/{index-671d55ca.js → index-88bfdb4e.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-c2b3a995.js';
+import { _ as __rest } from './tslib.es6-de55ba71.js';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-090fd413.js → index-8a544288.js}

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-78eb6156.js';
+import { T as Text } from './index-0119bf84.js';
 import cn from 'classnames';
-import { I as ImageWrap } from './index-84f421ac.js';
-import { T as Text$1 } from './index-2b6152da.js';
+import { I as ImageWrap } from './index-7804c3c2.js';
+import { T as Text$1 } from './index-c9abbed7.js';
 
 /* eslint-disable prettier/prettier */
 const ArrowRightBlue = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),

package/build/esm/{index-9f9fd21c.js → index-8e3ec863.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-c2b3a995.js';
+import { _ as __rest } from './tslib.es6-de55ba71.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-2b6152da.js';
-import { B as Button } from './index-0368b1d7.js';
-import { u as useTranslations } from './index-eed0a738.js';
+import { T as Text } from './index-c9abbed7.js';
+import { B as Button } from './index-770d5df0.js';
+import { u as useTranslations } from './index-b853ce3b.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-73760c56.js → index-918082d0.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-c2b3a995.js';
+import { _ as __rest } from './tslib.es6-de55ba71.js';
 import React__default, { useMemo } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-4677ee5f.js';
+import { M as MediaQueries } from './utils-4b0bcbf1.js';
 
 const StyledInput = styled.div `
   position: relative;