@hhgtech/hhg-components
Version:
Hello Health Group common components
378 lines (358 loc) • 15.9 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-107c23d7.js';
import React__default, { useMemo, useEffect, useRef, useContext, useState } from 'react';
import { User } from '@hhgtech/icons/core';
import { S as Spinner } from './Spinner-bb8cf11c.js';
import { a as Avatar } from './index-2a289da8.js';
import { B as Button } from './index-92ed0334.js';
import { T as Text } from './index-a5768260.js';
import { u as useTranslations } from './index-1215bc9f.js';
import { C as CommonGAssets } from './index-461f72c9.js';
import { theme } from './miscTheme.js';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-50ee2849.js';
import { setDefaultClass } from './miscDefaultClassWrapper.js';
import cn from 'classnames';
import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, c as VIDEO_LOCALES } from './index-e053201b.js';
import { i as domainLocalesMarryBaby } from './utils-88e98fd0.js';
import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain } from './normalizeLink-8db8cf91.js';
import { domainLocales } from './constantsDomainLocales.js';
import { ProfileNavigation } from './profileNavigation.js';
import { NavigationLogoutPopup } from './navigationLogoutPopup.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' || TOGETHER_LOCALES.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 useCSSFocusPopupHelper = (configs) => {
const { allowBgScroll } = configs || {};
const ref = useRef();
return {
containerRef: ref,
onContainerFocus: () => {
if (!allowBgScroll)
document.documentElement.style.overflow = 'hidden';
},
onContainerBlur: () => {
if (!allowBgScroll)
document.documentElement.style.overflow = '';
},
onButtonMouseDown: (e) => {
// this close popup when click, run after REact init
if (ref.current &&
(document.activeElement === ref.current ||
ref.current.contains(document.activeElement))) {
ref.current.blur();
document.activeElement.blur();
e.preventDefault();
}
},
onClose: () => {
if (ref.current &&
(document.activeElement === ref.current ||
ref.current.contains(document.activeElement))) {
ref.current.blur();
document.activeElement.blur();
}
},
};
};
const StyledPopup = setDefaultClass(styled.div `
position: absolute;
right: 0;
transition: all 0.5s ease-in-out;
overflow-y: auto;
&[data-open='true'] {
z-index: 200;
top: 120%;
opacity: 1;
visibility: visible;
}
&[data-open='false'] {
display: none;
}
.popup-content {
z-index: 111;
height: 100%;
border: 1px solid #0000001a;
border-radius: 16px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* min-height: 415px; */
${MediaQueries.mbUp} {
width: 320px;
}
${MediaQueries.mbDown} {
position: fixed;
left: 0;
width: 100%;
padding-bottom: 70px;
}
`, 'hhgcomp-navprofilebutton-popup');
const StyledPopupWrapper = setDefaultClass(styled.div `
position: fixed;
z-index: 150;
top: var(--header-bottom, 56px);
left: 0;
width: 100%;
height: 100%;
align-items: center;
${MediaQueries.mbUp} {
background-color: transparent;
&[data-type='welcome'] {
background: rgba(38, 38, 38, 0.3);
}
&[data-type='due-date'] {
background: rgba(38, 38, 38, 0.3);
}
}
${MediaQueries.mbDown} {
background: rgba(38, 38, 38, 0.3);
}
&[data-type='welcome'] {
top: 0;
}
&[data-open='false'] {
display: none;
}
`, 'hhgcomp-navprofilebutton-popupwrapper');
const StyledAvatar = styled.div `
width: 36px;
height: 36px;
cursor: pointer;
img {
border-radius: 50%;
}
.avatar {
width: 36px;
height: 36px;
object-fit: cover;
}
.avatar-default {
display: flex;
align-items: center;
justify-content: center;
background-color: ${theme.colors.secondaryBase};
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: bold;
}
`;
const StyledImageWrapper = styled.div `
display: inline-flex;
position: relative;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
flex-shrink: 0;
cursor: pointer;
.user-close-icon {
display: none;
}
&:focus-within {
.user-close-icon {
display: block;
}
.user-avatar {
display: none;
}
${StyledPopup.classSelector} {
z-index: 200;
top: 120%;
opacity: 1;
visibility: visible;
display: initial;
${MediaQueries.mbDown} {
top: 100%;
}
}
${StyledPopupWrapper.classSelector} {
display: initial;
}
}
`;
const StyledLoggedOutAnchor = styled.a `
display: inline-flex;
.login-btn[data-color='tertiary'][data-size='md'] {
padding-left: 12px;
padding-right: 12px;
}
.mobile-only {
${MediaQueries.mbUp} {
display: none;
}
}
.login-btn {
display: none;
${MediaQueries.mbUp} {
display: block;
border: 1px solid ${theme.colors.neutral100};
}
}
`;
const ProfilePopup = ({ isOpen, userInfo, closePopup, siteType = 'helloSites', dispatchLogout, }) => {
const { customClasses = {} } = useContext(NavigationContext);
const handleClickLogout = () => {
if (dispatchLogout) {
dispatchLogout();
closePopup();
}
};
return (React__default.createElement(StyledPopup, { className: customClasses.profilePopup, "data-open": isOpen },
React__default.createElement("div", { className: cn('popup-content', customClasses.profilePopupContent) },
React__default.createElement(ProfileNavigation, { siteType: siteType, onLogout: handleClickLogout, userInfo: userInfo }))));
};
const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, currentUrl, isMinifyLogin, onLogout, style, isLoading, isMobile, className, }) => {
const { t } = useTranslations();
const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false);
const name = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username);
const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = useCSSFocusPopupHelper();
const isLoginIcon = useMemo(() => isMobile && siteType === 'helloSites', [isMobile]);
if (isLoading)
return isLoginIcon ? (React__default.createElement(Spinner, null)) : (React__default.createElement(Button, { size: 'sm', color: "transparent", loading: true }));
return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(StyledImageWrapper, { ref: containerRef, style: style, tabIndex: 0, onBlur: onContainerBlur, onFocus: () => {
var _a;
onContainerFocus();
const popup = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#navigation-v2 .hhgcomp-navprofilebutton-popup');
if (popup) {
const bound = popup.getBoundingClientRect();
const top = bound.top;
const maxHeight = `calc(100vh - ${top}px)`;
popup.setAttribute('style', `max-height: ${maxHeight};`);
}
}, className: className },
React__default.createElement("div", { onMouseDown: onButtonMouseDown },
React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "user-close-icon" },
React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" })),
React__default.createElement(Avatar, { size: 32, className: "user-avatar", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, color: siteType === 'marryBaby'
? theme.mbColors.pink
: theme.colors.secondaryBase, placeholderText: name && name.length ? name[0].toUpperCase() : 'A' })),
React__default.createElement(ProfilePopup, { dispatchLogout: () => {
onClose();
setIsLogoutConfirmOpen(true);
}, isOpen: false, closePopup: onClose, siteType: siteType, userInfo: userInfo })),
React__default.createElement(NavigationLogoutPopup, { openLogoutPopup: isLogoutConfirmOpen, onCloseHandler: () => {
document.body.classList.toggle('noscroll', false);
setIsLogoutConfirmOpen(false);
}, siteType: siteType, onLogoutHandler: () => __awaiter(void 0, void 0, void 0, function* () {
setIsLogoutConfirmOpen(false);
document.body.classList.toggle('noscroll', false);
yield onLogout();
}) }))) : (React__default.createElement(StyledLoggedOutAnchor, { style: Object.assign({ textDecoration: 'none' }, style), "data-event-category": "Sign Up", "data-event-action": "Button Click", "data-event-label": currentUrl, "data-site-type": siteType, onClick: onLoginClick }, isMinifyLogin ? (React__default.createElement(StyledAvatar, null,
React__default.createElement("img", { src: CommonGAssets.getAssetPath('lock.png'), className: "avatar", loading: "lazy", alt: "avatar" }))) : (
// LOGIC:
// - DEsktop: always show button
// - Mobile: show button only for helloSites, show text for MarryBaby
React__default.createElement(React__default.Fragment, null,
siteType === 'helloSites' &&
(isLoginIcon ? (React__default.createElement("img", { className: "mobile-only", src: CommonGAssets.getAssetPath('login.svg'), style: {
cursor: 'pointer',
height: 24,
width: 24,
} })) : (React__default.createElement(Button, { className: "mobile-only", size: "sm", leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }), sx: {
paddingLeft: '8px',
paddingRight: '12px',
}, styles: {
leftIcon: {
marginRight: 4,
},
} }, t('navigation.loginJoin')))),
siteType === 'marryBaby' && (React__default.createElement("div", { className: "mobile-only", style: {
paddingLeft: 16,
} },
React__default.createElement(Text, { size: "p3", color: theme.mbColors.pink }, t('navigation.loginJoin')))),
siteType === 'marryBaby' ? (React__default.createElement(Button, { className: "login-btn", size: "md", leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))) : (React__default.createElement(Button, { className: "login-btn", size: "md", leftIcon: React__default.createElement(User, { color: "#595959", isSolid: true, size: 22 }), variant: "ghost", color: "#262626" }, t('navigation.loginJoin')))))));
};
export { NavigationProfileButton as N, NavigationContext as a, NavigationProvider as b, useCSSFocusPopupHelper as u };