@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-6

package/raw/components/organisms/navigationLayout/navigationBar/index.tsx

@@ -0,0 +1,798 @@
+import React, {
+  // useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react'
+
+import { SehatBadge, LockIcon } from 'assets/svg'
+import { Avatar } from 'components/atoms/avatar'
+import { Button } from 'components/atoms/button'
+import { Container } from 'components/atoms/container'
+import { Logo, TypeProps as LogoTypeProps } from 'components/atoms/logo'
+import { PureInput } from 'components/atoms/pureInput'
+import {
+  domainLocales,
+  LOCALE_SPECS,
+} from 'components/organisms/navigationLayout/constants'
+import { debounce, throttle } from 'lodash'
+import { theme } from 'misc/theme'
+
+import { useTranslation } from '../utils'
+import {
+  StyledDesktopHeader,
+  StyledDesktopHeaderWrapper,
+  StyledDesktopMenuSearchInput,
+  StyledHeaderMenuItem,
+  StyledImageWrapper,
+  StyledLeftGroup,
+  StyledLogoWrapper,
+  StyledRightGroup,
+  StyledProfileMenu,
+  StyledMenuIconWrapper,
+  StyledAvatar,
+} from './index.styled'
+import { Props } from './NavigationBar.types'
+import { NavigationBarMobile } from './NavigationBarMobile'
+
+export type { Props } from './NavigationBar.types'
+
+export const useHeaderHeightHook = ({
+  hasSponsoredBanners,
+  isSiteWide,
+  isSponsored,
+  isShowingSiteWideBanner,
+  isMobile,
+}: {
+  hasSponsoredBanners?: boolean
+  isSiteWide?: boolean
+  isSponsored?: boolean
+  isShowingSiteWideBanner?: boolean
+  isMobile?: boolean
+}) => {
+  const headerRef = useRef<HTMLDivElement>(null)
+  const [headerHeight, setHeaderHeight] = useState(0)
+  const debounceSetHeader = useCallback(
+    debounce(() => {
+      const newHeaderHeight = headerRef.current?.clientHeight || 0
+      if (window.scrollY <= newHeaderHeight + 30)
+        setHeaderHeight(newHeaderHeight)
+    }, 100),
+    [],
+  )
+  useEffect(() => {
+    window.addEventListener('resize', debounceSetHeader)
+    window.addEventListener('scroll', debounceSetHeader)
+    return () => {
+      window.removeEventListener('resize', debounceSetHeader)
+      window.removeEventListener('scroll', debounceSetHeader)
+    }
+  }, [])
+  useEffect(() => {
+    debounceSetHeader()
+  }, [
+    isSiteWide,
+    isShowingSiteWideBanner,
+    isSponsored,
+    hasSponsoredBanners,
+    headerRef.current,
+  ])
+
+  const defaultHeaderHeight = useMemo(() => {
+    let res = isMobile ? 64 : 69
+    if (isShowingSiteWideBanner) {
+      res += 64
+    }
+    if (isSponsored) {
+      res += 40
+    }
+    return res
+  }, [isMobile, isShowingSiteWideBanner, isSponsored])
+  return {
+    headerHeight: headerHeight || defaultHeaderHeight,
+    headerRef,
+  }
+}
+
+const NavigationBar = ({
+  siteType,
+  basePath,
+  statics,
+  currentPopupType = 'none',
+  isDisplayed = true,
+  isSearchBarDisplay = true,
+  searchPlaceholder = '',
+  openPopup,
+  onTopBarAppears,
+  onSearchChange,
+  onSearchKeyPress,
+  menu,
+  isAmp,
+  profileMenu,
+  isMobile = false,
+  isLoginButtonDisplayed,
+  title,
+  type = 'home',
+  onMenuClick,
+  isStatic = false,
+  routerAsPath: asPath,
+  locale,
+  userInfo,
+  marryBaby: { tone } = { tone: 'white' },
+  menuItems = [],
+  // className,
+  isInit: _isInit,
+  sitewideBanner,
+  sitewideBannerShown = true,
+  sponsorComponent,
+  languageMenu,
+  isSearchIconDisplayed = false,
+  enabledExperimentalCareHeader,
+  onCareHeaderClick,
+}: Props) => {
+  const { SSO_URL, HOME_PAGE_URL, CARE_URL_FE } = statics
+  const f = useTranslation()
+  const isSponsored = !!sponsorComponent
+
+  // const { locale = 'en-PH', asPath } = useRouter()
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  // const [searchValue, setSearchValue] = useState('')
+  const [sitewideBannerClosed, setSitewideBannerClosed] = useState(false)
+  const [isCloseBookmarkTooltips, setIsCloseBookmarkTooltips] = useState(false)
+  const [isInit, setIsInit] = useState(_isInit || false)
+  const scrollY = useRef(47)
+  const collapsedMenu = useRef<boolean>(false)
+  const searchIconDisplayed = useRef<boolean>(false)
+
+  const currentUrl =
+    siteType === 'helloSites'
+      ? `https://${domainLocales[locale]}${asPath}`
+      : `https://www.marrybaby.vn${asPath}`
+
+  // const { state } = useContext(AppContext)
+  // const { userInfo } = state || {}
+
+  const avatar = useMemo(() => {
+    const name = userInfo?.name || userInfo?.username
+
+    return (
+      <Avatar
+        type="rounded"
+        size="small"
+        avatarUrl={userInfo?.avatar}
+        firstLetter={name && name.length ? name[0].toUpperCase() : 'A'}
+        backgroundColor={
+          siteType === 'marryBaby'
+            ? theme.mbColors.pink
+            : theme.colors.secondaryBase
+        }
+        isAmp={isAmp}
+      />
+    )
+  }, [userInfo?.username, userInfo?.name, userInfo?.avatar])
+
+  const goToLogin = () => {
+    const currentLocation = window.location.href
+    window.location.href = SSO_URL
+      ? `${SSO_URL}?returnUrl=${currentLocation}`
+      : currentLocation
+  }
+
+  const logoType =
+    siteType === 'helloSites'
+      ? (LOCALE_SPECS[locale]?.LOGO_TYPE as LogoTypeProps)
+      : siteType
+  const isBrowser = typeof window !== 'undefined'
+
+  const onSearchValueChanged = (v: string) => {
+    // setSearchValue(v)
+    onSearchChange?.(v)
+  }
+  const scrolling = useCallback(
+    throttle(() => {
+      if (type === 'home') {
+        const container = window
+        const stickyContainerHeight =
+          document.querySelector('.sticky-container')?.clientHeight
+
+        if (isBrowser && container) {
+          if (
+            container.scrollY > scrollY.current &&
+            container.scrollY > 64 &&
+            !collapsedMenu.current
+          ) {
+            collapsedMenu.current = true
+            setIsCollapsed(true)
+          }
+
+          if (container.scrollY < scrollY.current && collapsedMenu.current) {
+            collapsedMenu.current = false
+            setIsCollapsed(false)
+
+            if (
+              stickyContainerHeight &&
+              stickyContainerHeight > container.scrollY
+            ) {
+            }
+          }
+
+          if (container.scrollY < scrollY.current) {
+            if (
+              stickyContainerHeight &&
+              stickyContainerHeight > container.scrollY
+            ) {
+            }
+          }
+
+          if (isSearchBarDisplay) {
+            if (
+              container.scrollY < 64 &&
+              container.scrollY < scrollY.current &&
+              searchIconDisplayed.current
+            ) {
+              searchIconDisplayed.current = false
+            }
+
+            if (
+              container.scrollY > 8 &&
+              container.scrollY > scrollY.current &&
+              !searchIconDisplayed.current
+            ) {
+              searchIconDisplayed.current = true
+            }
+          } else {
+            searchIconDisplayed.current = true
+          }
+
+          container.scrollY >= 0 && (scrollY.current = container.scrollY)
+        }
+
+        // set collapse topbar
+
+        // hide search input quickly
+        // if (
+        //   container &&
+        //   container.scrollY > scrollY.current &&
+        //   container.scrollY > 48 &&
+        //   container.scrollY < 63 &&
+        //   !collapsedMenu.current
+        // ) {
+        //   container.scrollTo({
+        //     top: 112,
+        //     left: 0,
+        //     behavior: 'smooth',
+        //   })
+        // }
+
+        // hide/display search icon
+      }
+    }, 300),
+    [],
+  )
+
+  useEffect(() => {
+    onTopBarAppears?.(!isCollapsed)
+  }, [isCollapsed])
+
+  const keyPressed = (e: React.KeyboardEvent<Element>) => {
+    onSearchKeyPress &&
+      onSearchKeyPress(
+        e,
+        (document.getElementById('search-input-' + type) as HTMLInputElement)
+          ?.value ?? '',
+      )
+  }
+
+  useEffect(() => {
+    isMobile && scrolling()
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrolling, { passive: true })
+    return () => {
+      window.removeEventListener('scroll', scrolling)
+    }
+  }, [])
+
+  useEffect(() => {
+    setIsInit(true)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setIsCloseBookmarkTooltips(Boolean(isCloseBookmarkTooltips))
+    }
+  }, [])
+
+  const focusToMenu = () => {
+    setTimeout(() => {
+      ;(
+        document.getElementsByClassName(
+          'top-menu-categories',
+        )?.[0] as HTMLElement
+      )?.focus()
+    }, 100)
+  }
+
+  const desktopMenuItems = (
+    <>
+      {menuItems.find((i) => i.id === 'categories') && (
+        <StyledHeaderMenuItem
+          data-is-active={currentPopupType === 'categories'}
+          className={!isInit ? 'menu-handler-categories' : ''}
+          tabIndex={0}
+          onClick={() => {
+            openPopup?.('categories')
+            focusToMenu()
+          }}
+        >
+          <div className="menu-handler-item">
+            {f('home.navigator.menuItem.discover')}
+            <StyledMenuIconWrapper>
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11.5 7.5L9 10L6.5 7.5"
+                  stroke="#202135"
+                  strokeWidth="1.33"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </StyledMenuIconWrapper>
+          </div>
+          {currentPopupType === 'categories' && <div>{menu}</div>}
+        </StyledHeaderMenuItem>
+      )}
+      {menuItems.find((i) => i.id === 'healthTools') && (
+        <StyledHeaderMenuItem
+          data-is-active={currentPopupType === 'tools'}
+          className={!isInit ? 'menu-handler-health-tools' : ''}
+          tabIndex={0}
+        >
+          <div
+            className="menu-handler-item"
+            onClick={() => {
+              openPopup && openPopup('tools')
+            }}
+          >
+            {f('home.navigator.menuItem.healthTools')}
+            <StyledMenuIconWrapper>
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11.5 7.5L9 10L6.5 7.5"
+                  stroke="#202135"
+                  strokeWidth="1.33"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </StyledMenuIconWrapper>
+          </div>
+          {currentPopupType === 'tools' && <div>{menu}</div>}
+        </StyledHeaderMenuItem>
+      )}
+      {menuItems.find((i) => i.id === 'care') &&
+        !enabledExperimentalCareHeader && (
+          <StyledHeaderMenuItem
+            data-is-active={currentPopupType === 'care'}
+            className={!isInit ? 'menu-handler-care-specialties' : ''}
+            tabIndex={0}
+          >
+            <div
+              className="menu-handler-item"
+              onClick={() => {
+                openPopup && openPopup('care')
+              }}
+            >
+              {f('home.navigator.menuItem.helloCare')}
+              <StyledMenuIconWrapper>
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 18 18"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M11.5 7.5L9 10L6.5 7.5"
+                    stroke="#202135"
+                    strokeWidth="1.33"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </StyledMenuIconWrapper>
+            </div>
+            {currentPopupType === 'care' && <div>{menu}</div>}
+          </StyledHeaderMenuItem>
+        )}
+      {menuItems.find((i) => i.id === 'together') && (
+        <StyledHeaderMenuItem
+          data-is-active={currentPopupType === 'communities'}
+          className={!isInit ? 'menu-handler-communities' : ''}
+          tabIndex={0}
+        >
+          <div
+            className="menu-handler-item"
+            onClick={() => {
+              openPopup && openPopup('communities')
+            }}
+          >
+            {f('home.navigator.menuItem.helloTogether')}
+            <StyledMenuIconWrapper>
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11.5 7.5L9 10L6.5 7.5"
+                  stroke="#202135"
+                  strokeWidth="1.33"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </StyledMenuIconWrapper>
+          </div>
+          {currentPopupType === 'communities' && <div>{menu}</div>}
+        </StyledHeaderMenuItem>
+      )}
+    </>
+  )
+
+  const hasSponsoredBanners = !!sponsorComponent?.props?.sponsoredBy?.length
+  const isSiteWide = !!sitewideBanner && !sitewideBannerClosed
+
+  const isShowingSiteWideBanner =
+    sitewideBannerShown && !!sitewideBanner && !sitewideBannerClosed
+  const { headerRef, headerHeight } = useHeaderHeightHook({
+    isSiteWide,
+    isShowingSiteWideBanner,
+    isSponsored,
+    hasSponsoredBanners,
+  })
+
+  if (isMobile) {
+    return (
+      <NavigationBarMobile
+        type={type}
+        isStatic={isStatic}
+        isAmp={isAmp}
+        isDisplayed={isDisplayed}
+        siteType={siteType}
+        isCollapsed={isCollapsed}
+        sitewideBannerShown={sitewideBannerShown}
+        sitewideBanner={sitewideBanner}
+        sitewideBannerClosed={sitewideBannerClosed}
+        setSitewideBannerClosed={setSitewideBannerClosed}
+        isMobile={isMobile}
+        onMenuClick={onMenuClick}
+        menu={menu}
+        isSearchIconDisplayed={isSearchIconDisplayed}
+        statics={statics}
+        basePath={basePath}
+        languageMenu={languageMenu}
+        enabledExperimentalCareHeader={enabledExperimentalCareHeader}
+        logoType={logoType}
+        locale={locale}
+        isInit={isInit}
+        title={title}
+        sponsorComponent={sponsorComponent}
+        currentUrl={currentUrl}
+        userInfo={userInfo}
+        currentPopupType={currentPopupType}
+        avatar={avatar}
+        profileMenu={profileMenu}
+        isLoginButtonDisplayed={isLoginButtonDisplayed}
+        goToLogin={goToLogin}
+        isSearchBarDisplay={isSearchBarDisplay}
+        searchPlaceholder={searchPlaceholder}
+        onSearchValueChanged={onSearchValueChanged}
+        keyPressed={keyPressed}
+      />
+    )
+  }
+
+  return (
+    <>
+      <div
+        style={{
+          height: headerHeight,
+        }}
+      ></div>
+      <StyledDesktopHeaderWrapper
+        ref={headerRef}
+        data-site-type={siteType}
+        data-marry-baby-tone={siteType === 'marryBaby' && tone}
+        data-sponsored={isSponsored}
+        data-sitewide-banner-shown={isShowingSiteWideBanner}
+      >
+        {sitewideBanner
+          ? !React.isValidElement(sitewideBanner)
+            ? sitewideBanner
+            : React.cloneElement<{
+                isCollapsed?: boolean
+                setBannerClosed?: (v: boolean) => void
+              }>(sitewideBanner, {
+                isCollapsed,
+                setBannerClosed: setSitewideBannerClosed,
+              })
+          : null}
+        <Container
+          style={{
+            height: 69,
+            padding: '0 16px',
+          }}
+          type={siteType}
+        >
+          <StyledDesktopHeader>
+            <StyledLeftGroup>
+              <a href={HOME_PAGE_URL}>
+                <StyledLogoWrapper
+                  data-is-having-border={siteType === 'helloSites'}
+                >
+                  <Logo
+                    style={{
+                      display: 'flex',
+                    }}
+                    type={logoType}
+                    height="27px"
+                    width="121px"
+                    badge={
+                      locale === 'id-ID' ? (
+                        <img
+                          src={SehatBadge}
+                          style={{
+                            width: 56,
+                            height: 23,
+                            maxWidth: 56,
+                          }}
+                          width="56"
+                          height="23"
+                        />
+                      ) : undefined
+                    }
+                  />
+                </StyledLogoWrapper>
+              </a>
+              {isSearchBarDisplay && siteType === 'helloSites' && (
+                <StyledDesktopMenuSearchInput
+                  data-header-type={type}
+                  data-is-displayed={isDisplayed}
+                  data-sitewide-banner-shown={
+                    sitewideBannerShown && !!sitewideBanner
+                  }
+                >
+                  <PureInput
+                    style={{
+                      minHeight: '32px',
+                      maxHeight: '32px',
+                      minWidth: '100%',
+                      backgroundColor: theme.colors.white,
+                    }}
+                    // value={searchValue}
+                    name={'search-input-' + type + (!isInit ? '-temp' : '')}
+                    autoFocus={false}
+                    size="sm"
+                    placeholder={searchPlaceholder}
+                    onChange={onSearchValueChanged}
+                    onKeyPress={keyPressed}
+                    displayIcon={
+                      <a
+                        data-event-category="Search Button"
+                        data-event-action="Click"
+                        style={{
+                          width: '24px',
+                          height: '24px',
+                          transform: 'scale(0.8)',
+                        }}
+                      >
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M4.875 11C4.875 7.61726 7.61726 4.875 11 4.875C14.3827 4.875 17.125 7.61726 17.125 11C17.125 14.3827 14.3827 17.125 11 17.125C7.61726 17.125 4.875 14.3827 4.875 11ZM11 3.125C6.65076 3.125 3.125 6.65076 3.125 11C3.125 15.3492 6.65076 18.875 11 18.875C12.8594 18.875 14.5683 18.2306 15.9155 17.1529L19.3813 20.6187C19.723 20.9604 20.277 20.9604 20.6187 20.6187C20.9604 20.277 20.9604 19.723 20.6187 19.3813L17.1529 15.9155C18.2306 14.5683 18.875 12.8594 18.875 11C18.875 6.65076 15.3492 3.125 11 3.125Z"
+                            fill="#8C8C8C"
+                          />
+                        </svg>
+                      </a>
+                    }
+                  />
+                </StyledDesktopMenuSearchInput>
+              )}
+              {siteType === 'marryBaby' && (
+                <div style={{ marginLeft: 28, display: 'flex' }}>
+                  {desktopMenuItems}
+                </div>
+              )}
+            </StyledLeftGroup>
+            <StyledRightGroup>
+              {siteType === 'helloSites' && desktopMenuItems}
+              {isSearchBarDisplay && siteType === 'marryBaby' && (
+                <StyledDesktopMenuSearchInput
+                  data-header-type={type}
+                  data-is-displayed={isDisplayed}
+                  data-is-styled-borderless={siteType === 'marryBaby'}
+                  data-marry-baby-theme={tone}
+                >
+                  <PureInput
+                    style={{
+                      minHeight: '40px',
+                      maxHeight: '40px',
+                      minWidth: '100%',
+                      borderRadius: 16,
+                    }}
+                    // value={searchValue}
+                    name={'search-input-' + type + (!isInit ? '-temp' : '')}
+                    autoFocus={false}
+                    size="sm"
+                    placeholder={searchPlaceholder}
+                    onChange={onSearchValueChanged}
+                    onKeyPress={keyPressed}
+                    displayIcon={
+                      <a
+                        data-event-category="Search Button"
+                        data-event-action="Click"
+                        style={{ width: '24px', height: '24px' }}
+                      >
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M3.31573 13.7811L3.94855 13.6326L3.31573 13.7811ZM3.31573 8.324L3.94855 8.47244L3.31573 8.324ZM18.7893 8.324L19.4221 8.17556L18.7893 8.324ZM18.7893 13.781L19.4221 13.9295L18.7893 13.781ZM13.781 18.7893L13.6326 18.1565L13.781 18.7893ZM8.324 18.7893L8.17556 19.4221L8.324 18.7893ZM8.324 3.31573L8.17556 2.6829L8.324 3.31573ZM13.781 3.31573L13.9295 2.6829L13.781 3.31573ZM20.5404 21.4596C20.7942 21.7135 21.2058 21.7135 21.4596 21.4596C21.7135 21.2058 21.7135 20.7942 21.4596 20.5404L20.5404 21.4596ZM3.94855 13.6326C3.55048 11.9356 3.55048 10.1695 3.94855 8.47244L2.6829 8.17556C2.23903 10.0679 2.23903 12.0372 2.68291 13.9295L3.94855 13.6326ZM18.1565 8.47244C18.5546 10.1695 18.5546 11.9356 18.1565 13.6326L19.4221 13.9295C19.866 12.0372 19.866 10.0679 19.4221 8.17556L18.1565 8.47244ZM13.6326 18.1565C11.9356 18.5546 10.1695 18.5546 8.47244 18.1565L8.17556 19.4221C10.0679 19.866 12.0372 19.866 13.9295 19.4221L13.6326 18.1565ZM8.47244 3.94855C10.1695 3.55048 11.9356 3.55048 13.6326 3.94855L13.9295 2.6829C12.0372 2.23903 10.0679 2.23903 8.17556 2.6829L8.47244 3.94855ZM8.47244 18.1565C6.22776 17.63 4.47508 15.8773 3.94855 13.6326L2.68291 13.9295C3.32219 16.6549 5.45019 18.7829 8.17556 19.4221L8.47244 18.1565ZM13.9295 19.4221C16.6549 18.7829 18.7829 16.6549 19.4221 13.9295L18.1565 13.6326C17.63 15.8773 15.8773 17.63 13.6326 18.1565L13.9295 19.4221ZM13.6326 3.94855C15.8773 4.47508 17.63 6.22775 18.1565 8.47244L19.4221 8.17556C18.7829 5.45019 16.6549 3.32219 13.9295 2.6829L13.6326 3.94855ZM8.17556 2.6829C5.45019 3.32219 3.32219 5.45018 2.6829 8.17556L3.94855 8.47244C4.47508 6.22775 6.22775 4.47508 8.47244 3.94855L8.17556 2.6829ZM16.8755 17.7948L20.5404 21.4596L21.4596 20.5404L17.7948 16.8755L16.8755 17.7948Z"
+                            fill="#3E3F58"
+                          />
+                        </svg>
+                      </a>
+                    }
+                  />
+                </StyledDesktopMenuSearchInput>
+              )}
+              {typeof languageMenu !== 'undefined' && (
+                <StyledHeaderMenuItem
+                  data-is-active={true}
+                  className={!isInit ? 'menu-handler-language' : ''}
+                  onClick={() => {
+                    openPopup && openPopup('language')
+                  }}
+                >
+                  {languageMenu}
+                </StyledHeaderMenuItem>
+              )}
+
+              <StyledProfileMenu
+                data-is-active={currentPopupType === 'profile'}
+                data-is-profile={true}
+                className={!isInit ? 'menu-handler-health-tools' : ''}
+                tabIndex={0}
+              >
+                <div className="menu-handler-item">
+                  {enabledExperimentalCareHeader && (
+                    <>
+                      {onCareHeaderClick ? (
+                        <Button
+                          className="login-btn-mobile"
+                          size="sm"
+                          color="secondary"
+                          dataEventCategory="Care"
+                          dataEventAction="Navigation Bar Click"
+                          dataEventLabel={currentUrl}
+                          onClick={onCareHeaderClick}
+                        >
+                          {f('login.booking')}
+                        </Button>
+                      ) : (
+                        <a
+                          href={CARE_URL_FE}
+                          className="care-button no-replace-click"
+                        >
+                          <Button
+                            className="login-btn-mobile"
+                            size="sm"
+                            color="secondary"
+                            dataEventCategory="Care"
+                            dataEventAction="Navigation Bar Click"
+                            dataEventLabel={currentUrl}
+                          >
+                            {f('login.booking')}
+                          </Button>
+                        </a>
+                      )}
+                    </>
+                  )}
+                  {userInfo?.id ? (
+                    <StyledImageWrapper style={{ position: 'relative' }}>
+                      <div onClick={() => openPopup && openPopup('profile')}>
+                        {avatar}
+                      </div>
+                      {profileMenu}
+                    </StyledImageWrapper>
+                  ) : (
+                    isLoginButtonDisplayed && (
+                      <a
+                        data-event-category="Sign Up"
+                        data-event-action="Button Click"
+                        data-event-label={currentUrl}
+                      >
+                        {enabledExperimentalCareHeader ? (
+                          <StyledAvatar onClick={goToLogin}>
+                            <img
+                              src={LockIcon}
+                              className="avatar"
+                              alt="avatar"
+                            />
+                          </StyledAvatar>
+                        ) : siteType === 'helloSites' ? (
+                          <Button
+                            size="md"
+                            color="secondary"
+                            onClick={goToLogin}
+                          >
+                            {f('navigation.loginJoin')}
+                          </Button>
+                        ) : (
+                          <Button
+                            size="md"
+                            color="secondary"
+                            theme="marryBaby"
+                            onClick={goToLogin}
+                          >
+                            {f('navigation.loginJoin')}
+                          </Button>
+                        )}
+                      </a>
+                    )
+                  )}
+                </div>
+              </StyledProfileMenu>
+            </StyledRightGroup>
+          </StyledDesktopHeader>
+        </Container>
+        {sponsorComponent
+          ? !React.isValidElement(sponsorComponent)
+            ? sponsorComponent
+            : React.cloneElement<{
+                isCollapsed?: boolean
+                isMobile?: boolean
+                isAmp?: boolean
+                locale?: string
+              }>(sponsorComponent, {
+                isCollapsed,
+                locale,
+                isMobile,
+                isAmp,
+              })
+          : null}
+      </StyledDesktopHeaderWrapper>
+    </>
+  )
+}
+
+export { NavigationBar }