@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

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

@@ -1,798 +0,0 @@
-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 }