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

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

@@ -1,1272 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-
-import {
-  HelloCareIcon,
-  DiscoverIcon,
-  TogetherIcon,
-  HealthToolsIcon,
-} from 'assets/svg'
-import { LocaleType } from 'interfaces/types'
-
-import { AmpSidebar } from './ampSideBar'
-import { ChevronUpBlue, ChevronDown } from './assets'
-import {
-  LOCALE_SPECS as defaultLocaleSpecs,
-  STATIC_PAGES as defaultStaticPages,
-  domainLocales,
-  SSO_PATHS,
-  // DEFAULT_FOOTER,
-} from './constants'
-import { CustomFooter } from './CustomFooter'
-import {
-  StyledContainer,
-  StyledHomeContainer,
-  StyledAmpHomeContainer,
-  StyledLanguageChangeLink,
-} from './index.styled'
-import { StyledMenuLanguageLabelContainer } from './index.styled'
-import { Layout, SEOData } from './layout'
-import { MenuServiceList } from './menuServiceList'
-import { NavigationBar } from './navigationBar'
-import { NavigationLogoutPopup } from './navigationLogoutPopup'
-import { ProfilePopup } from './profilePopup'
-import { Option, TooltipSelection } from './tooltipSelection'
-import {
-  Category,
-  Community,
-  DesktopMenuPopup,
-  FooterInfo,
-  HealthTool,
-  HealthToolByCategory,
-  MarryBabyFooterInfo,
-  MenuItemType,
-  MenuServiceType,
-  MobileMenuPopup,
-  Specialty,
-  SpotlightSummary,
-  State,
-  UrlSource,
-  AmpNextArticle,
-} from './types'
-import {
-  checkAvailableSpotlight,
-  formatCategory,
-  formatCommunity,
-  formatHealthTool,
-  formatHealthToolTypeCategory,
-  formatSpotlightsList,
-  getCareDefaultSpecialtiesApiPath,
-  getDiscoverDefaultCategoriesApiPath,
-  getDiscoverDefaultFooterApiPath,
-  getDiscoverDefaultHealthToolsByCategoryApiPath,
-  getDiscoverDefaultSpotlightsApiPath,
-  getMarryBabyDefaultFooterApiPath,
-  getMarryBabyDefaultHealthToolsApiPath,
-  getTogetherDefaultCommunitiesApiPath,
-  getTogetherMarryBabyCommunitiesApiPath,
-  useTranslation,
-} from './utils'
-
-export type Props = {
-  children?: JSX.Element | JSX.Element[]
-  isMobile?: boolean
-  siteType: 'marryBaby' | 'helloSites'
-  ssrMenuContent?: {
-    categories?: Category[]
-    healthTools?: HealthTool[]
-    healthToolsByCategory?: HealthToolByCategory[]
-    careSpecialties?: Specialty[]
-    togetherCommunities?: Community[]
-    spotlightsList?: SpotlightSummary[]
-  }
-  MetaPageTitle?: string
-  MetaPageDescription?: string
-  MetaPageImage?: string
-  SEOData?: SEOData
-  UP_BASEPATH?: string
-  isSearchBarDisplay?: boolean
-  className?: string
-  isStatic?: boolean
-  seoType?: 'article' | 'website' | 'profile'
-  currentCategory?: string
-  isCommentReleaseSSR?: boolean
-  isMyHealthEnabled?: boolean
-  together?: {
-    TOGETHER_MENU_COUNTRIES_ENABLED?: LocaleType[]
-    ENABLE_COMMUNITY_PROFILE_MENU_LOCALES?: LocaleType[]
-    togetherApiDomain?: string
-  }
-  care?: {
-    CARE_MENU_COUNTRIES_ENABLED?: LocaleType[]
-    ENABLE_CARE_PROFILE_MENU_LOCALES?: LocaleType[]
-    careApiDomain?: string
-    menuActionType?: 'redirectOnly' | 'subMenuList'
-  }
-  discover?: { discoverApiDomain?: string }
-  sso?: {
-    dispatchLogout?: () => void
-    SSO_URL?: string
-  }
-  activeMenuService?: MenuServiceType
-  logoutHandlers?: {
-    isLogoutPopupOpened?: boolean
-    callPostLogOutApi?: () => void
-    onClosePopup?: () => void
-    onLogout?: () => void
-  }
-  marryBaby?: {
-    tone: 'pink' | 'white'
-    marryBabyApiDomain?: string
-    socialLinks?: {
-      facebookLink?: string
-      twitterLink?: string
-      instagramLink?: string
-      zaloLink?: string
-      linkedinLink?: string
-      youtubeLink?: string
-    }
-  }
-  footerInfo?: FooterInfo | MarryBabyFooterInfo
-  statics: {
-    DISCOVER_URL_FE?: string
-    TOGETHER_URL_FE?: string
-    HEALTH_TOOL_URL_FE?: string
-    CARE_URL_FE?: string
-    MARRY_BABY_FE?: string
-    HOME_PAGE_URL?: string
-    LOCALE_SPECS?: {
-      [key: string]: {
-        [key: string]: string | null
-      }
-    }
-    STATIC_PAGES?: {
-      [key in LocaleType]: {
-        [key: string]: string | null
-      }
-    }
-  }
-  translation?: { [key: string]: string }
-  basePath: string
-  isAmp?: boolean
-  locale: LocaleType
-  routerPathname: string
-  routerQuery: { [key: string]: string }
-  routerAsPath: string
-  nextHead: React.FunctionComponent
-  userState: State
-  userProfileRouterPush?: (s: string) => void
-  callApiHandler: (p: string, m: 'GET' | 'POST' | 'PUT') => any
-  onTopBarAppears?: (b: boolean) => void
-  forcedCanonicalUrl?: string
-  isUserProfileNavigatorMenuHidden?: boolean
-  sitewideBanner?: JSX.Element
-  sitewideBannerShown?: boolean
-  sponsorComponent?: JSX.Element
-  languageOptions?: Option[]
-  ampSubBar?: JSX.Element
-  isSearchIconDisplayed?: boolean
-  enabledExperimentalCareHeader?: boolean
-  onCareHeaderClick?: (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-  ) => void
-  dueDatePopup?: JSX.Element
-  welcomePopup?: JSX.Element
-  ampNextArticle?: AmpNextArticle
-  usingDefaultHead?: boolean
-  acceptCookiePopup?: JSX.Element
-  seoCustom?: boolean
-  hasStickyBottomBar?: boolean
-}
-
-const checkDisplayStyle = (checkingClass: string): string | false | null => {
-  const isBrowser = typeof window !== 'undefined'
-  const desktopPopupCategories =
-    isBrowser && document.querySelector(checkingClass)
-  const desktopPopupCategoriesStyle =
-    desktopPopupCategories && window.getComputedStyle(desktopPopupCategories)
-  return (
-    desktopPopupCategoriesStyle &&
-    desktopPopupCategoriesStyle.getPropertyValue('display')
-  )
-}
-
-const NavigationLayout = ({
-  siteType,
-  MetaPageTitle,
-  MetaPageDescription,
-  MetaPageImage,
-  // currentCategory,
-  footerInfo: footerInfoSSR,
-  children,
-  ssrMenuContent: {
-    categories: categoriesSSR = [],
-    healthTools: healthToolsSSR = [],
-    healthToolsByCategory: healthToolsByCategorySSR = [],
-    careSpecialties: careSpecialtiesSSR = [],
-    togetherCommunities: togetherCommunitiesSSR = [],
-    spotlightsList: spotlightsListSSR = [],
-  } = {},
-  SEOData = {},
-  UP_BASEPATH = SSO_PATHS.SSO_USER_PROFILE,
-  isStatic = false,
-  seoType = 'website',
-  isMobile,
-  isMyHealthEnabled = false,
-  logoutHandlers: {
-    isLogoutPopupOpened,
-    callPostLogOutApi,
-    onClosePopup,
-    onLogout,
-  },
-  marryBaby: {
-    tone = 'white',
-    marryBabyApiDomain,
-    socialLinks: {
-      facebookLink = '',
-      instagramLink = '',
-      linkedinLink = '',
-      twitterLink = '',
-      youtubeLink = '',
-      zaloLink = '',
-    } = {},
-  } = {
-    tone: 'white',
-    marryBabyApiDomain: '',
-    socialLinks: {
-      facebookLink: '',
-      instagramLink: '',
-      linkedinLink: '',
-      twitterLink: '',
-      youtubeLink: '',
-      zaloLink: '',
-    },
-  },
-  statics: {
-    DISCOVER_URL_FE: DISCOVER_URL_FE_CUSTOM,
-    TOGETHER_URL_FE,
-    MARRY_BABY_FE,
-    HOME_PAGE_URL,
-    HEALTH_TOOL_URL_FE,
-    CARE_URL_FE,
-    LOCALE_SPECS = defaultLocaleSpecs,
-    STATIC_PAGES = defaultStaticPages,
-  } = {
-    LOCALE_SPECS: defaultLocaleSpecs,
-    STATIC_PAGES: defaultStaticPages,
-  },
-  sso: { dispatchLogout, SSO_URL } = {},
-  together: {
-    TOGETHER_MENU_COUNTRIES_ENABLED,
-    ENABLE_COMMUNITY_PROFILE_MENU_LOCALES,
-    togetherApiDomain,
-  } = {
-    TOGETHER_MENU_COUNTRIES_ENABLED: ['id-ID', 'vi-VN'],
-    ENABLE_COMMUNITY_PROFILE_MENU_LOCALES: ['id-ID', 'vi-VN'],
-    togetherApiDomain: '',
-  },
-  care: {
-    CARE_MENU_COUNTRIES_ENABLED,
-    ENABLE_CARE_PROFILE_MENU_LOCALES,
-    careApiDomain,
-  } = {
-    CARE_MENU_COUNTRIES_ENABLED: ['vi-VN', 'id-ID', 'en-PH'],
-    ENABLE_CARE_PROFILE_MENU_LOCALES: [],
-    menuActionType: 'redirectOnly',
-    careApiDomain: '',
-  },
-  discover: { discoverApiDomain } = {
-    discoverApiDomain: '',
-  },
-  activeMenuService = 'categories',
-  basePath,
-  isAmp = false,
-  nextHead,
-  routerPathname,
-  routerQuery,
-  routerAsPath,
-  locale,
-  userState,
-  callApiHandler,
-  userProfileRouterPush,
-  onTopBarAppears,
-  forcedCanonicalUrl,
-  isUserProfileNavigatorMenuHidden,
-  sitewideBanner,
-  sitewideBannerShown = true,
-  sponsorComponent,
-  languageOptions,
-  isSearchBarDisplay: isSearchBarDisplayProps,
-  ampSubBar,
-  isSearchIconDisplayed = true,
-  enabledExperimentalCareHeader = false,
-  onCareHeaderClick,
-  dueDatePopup,
-  welcomePopup,
-  ampNextArticle,
-  usingDefaultHead = true,
-  acceptCookiePopup,
-  seoCustom,
-  hasStickyBottomBar = true,
-}: Props) => {
-  // get isSearchBarDisplay from props, if no props then default to only show on desktop
-  const isSearchBarDisplay =
-    typeof isSearchBarDisplayProps === 'boolean'
-      ? isSearchBarDisplayProps
-      : !isMobile
-  const f = useTranslation()
-  const LOCALE_SPEC = LOCALE_SPECS[locale || 'en-PH'] || {}
-
-  const asPathname = useMemo(
-    () => routerAsPath.split('?')?.[0] || '',
-    [routerAsPath],
-  )
-  const selectedLanguage = useMemo(
-    () =>
-      `${basePath}${
-        asPathname.slice(-1) === '/' ? asPathname : `${asPathname}/`
-      }`,
-    [asPathname],
-  )
-  const languageChange = useMemo(
-    () =>
-      languageOptions?.find((option) => option.value !== selectedLanguage) ||
-      null,
-    [languageOptions, selectedLanguage],
-  )
-  const [footerInfo, setFooterInfo] = useState<
-    FooterInfo | MarryBabyFooterInfo
-  >(footerInfoSSR)
-
-  const [categories, setCategories] = useState<Category[]>(categoriesSSR)
-  const [healthTools, setHealthTools] = useState<HealthTool[]>(healthToolsSSR)
-  const [healthToolsByCategory, setHealthToolsByCategory] = useState<
-    HealthToolByCategory[]
-  >(healthToolsByCategorySSR)
-  const [careSpecialties, setCareSpecialties] =
-    useState<Specialty[]>(careSpecialtiesSSR)
-  const [communities, setCommunities] = useState<Community[]>(
-    togetherCommunitiesSSR,
-  )
-  const [spotlightsList, setSpotlightsList] =
-    useState<SpotlightSummary[]>(spotlightsListSSR)
-
-  const DISCOVER_URL_FE =
-    DISCOVER_URL_FE_CUSTOM || `https://${domainLocales[locale]}` || ''
-
-  const isBrowser = typeof window !== 'undefined'
-
-  const mobileSideMenu = isBrowser && document.querySelector('#categories-menu')
-  const mobileSideMenuStyle =
-    mobileSideMenu && isBrowser && window.getComputedStyle(mobileSideMenu)
-  const mobileSideMenuLeft =
-    mobileSideMenuStyle && mobileSideMenuStyle.getPropertyValue('left')
-
-  const isMobilePopupOpened = useRef(
-    mobileSideMenuLeft === '0px' ? true : false,
-  )
-  const [isMobilePopupOpenedFlag, setIsMobilePopupOpenedFlag] = useState(
-    isMobilePopupOpened.current,
-  )
-
-  // check if categories tool menu is appear
-  const desktopPopupCategoriesDisplay = checkDisplayStyle(
-    '.top-menu-categories',
-  )
-
-  // check if health tool menu is appear
-  const desktopPopupHealthToolsDisplay = checkDisplayStyle(
-    '.top-menu-health-tools',
-  )
-
-  // check if communities menu is appear
-  const desktopPopupCommunitiesDisplay = checkDisplayStyle(
-    '.top-menu-communities',
-  )
-
-  // check if care specialties menu is appear
-  const desktopPopupCareSpecialtiesDisplay = checkDisplayStyle(
-    '.top-menu-care-specialties',
-  )
-
-  // set popup
-  const [popupType, setPopupType] = useState<DesktopMenuPopup>(
-    desktopPopupCategoriesDisplay && desktopPopupCategoriesDisplay !== 'none'
-      ? 'categories'
-      : desktopPopupHealthToolsDisplay &&
-        desktopPopupHealthToolsDisplay !== 'none'
-      ? 'tools'
-      : desktopPopupCommunitiesDisplay &&
-        desktopPopupCommunitiesDisplay !== 'none'
-      ? 'communities'
-      : desktopPopupCareSpecialtiesDisplay &&
-        desktopPopupCareSpecialtiesDisplay !== 'none'
-      ? 'care'
-      : 'none',
-  )
-
-  const languageSelectedLabel = useMemo(
-    () => (
-      <StyledMenuLanguageLabelContainer>
-        {locale.split('-')?.[0]?.toUpperCase()}
-        <img
-          src={popupType === 'language' ? ChevronUpBlue : ChevronDown}
-          style={{ width: '16px', height: '16px' }}
-          alt={f('home.navigator.menuItem.language')}
-        />
-      </StyledMenuLanguageLabelContainer>
-    ),
-    [popupType, locale],
-  )
-
-  const { userInfo, isLoggedIn } = userState
-
-  const onMenuCollapsed = (type: MobileMenuPopup) => {
-    if (
-      // !isDesktopPopupOpen ||
-      // (isDesktopPopupOpen &&
-      popupType !== type
-      // )
-    ) {
-      // setIsDesktopPopupOpen(true)
-      setPopupType(type)
-      setIsMobilePopupOpenedFlag(true)
-    }
-
-    if (
-      // isDesktopPopupOpen &&
-      popupType === type
-    ) {
-      // setIsDesktopPopupOpen(false)
-      setPopupType('none')
-      setIsMobilePopupOpenedFlag(false)
-    }
-    // isMobilePopupOpened.current = !isMobilePopupOpenedFlag
-  }
-
-  const closeDesktopPopup = () => {
-    // setIsDesktopPopupOpen(false)
-    setPopupType('none')
-  }
-
-  const closeMobilePopup = () => {
-    // isMobilePopupOpened.current = false
-    setIsMobilePopupOpenedFlag(false)
-    setPopupType('none')
-  }
-
-  const openDesktopPopup = (type: DesktopMenuPopup) => {
-    if (
-      // !isDesktopPopupOpen ||
-      // (isDesktopPopupOpen &&
-      popupType !== type
-      // )
-    ) {
-      // setIsDesktopPopupOpen(true)
-      setPopupType(type)
-    }
-
-    if (
-      // isDesktopPopupOpen &&
-      popupType === type
-    ) {
-      // setIsDesktopPopupOpen(false)
-      setPopupType('none')
-    }
-  }
-
-  const onSearchKeyPress = (e: React.KeyboardEvent<Element>, t: string) => {
-    if (e.key === 'Enter') {
-      window.location.href = `${HOME_PAGE_URL}/search/?s=${t}`
-    }
-  }
-
-  const siteName = LOCALE_SPECS?.[locale]?.SITE_NAME_FORMATTED
-
-  const services = [
-    {
-      name: f('home.navigator.menuItem.discover'),
-      id: 'categories' as MenuServiceType,
-      link: './posts/abc',
-      niceName: '',
-      thumbnail: DiscoverIcon,
-      isDisplayed: true,
-    },
-    {
-      name: f('home.navigator.menuItem.healthTools'),
-      id: 'healthTools' as MenuServiceType,
-      link: './en',
-      thumbnail: HealthToolsIcon,
-      isDisplayed: true,
-    },
-  ] as MenuItemType[]
-
-  TOGETHER_MENU_COUNTRIES_ENABLED?.includes(locale) &&
-    services.push({
-      name: f('home.navigator.menuItem.helloTogether'),
-      id: 'together' as MenuServiceType,
-      link: TOGETHER_URL_FE + '/',
-      thumbnail: TogetherIcon,
-      isDisplayed: true,
-    })
-
-  CARE_MENU_COUNTRIES_ENABLED?.includes(locale) &&
-    services.push({
-      name: f('home.navigator.menuItem.helloCare'),
-      id: 'care' as MenuServiceType,
-      link: '/care',
-      thumbnail: HelloCareIcon,
-      isDisplayed: true,
-    })
-
-  useEffect(() => {
-    document.documentElement.style.overflow = isMobilePopupOpenedFlag
-      ? 'hidden'
-      : ''
-  }, [isMobilePopupOpenedFlag])
-
-  const isSponsored = !!sponsorComponent
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      if (routerQuery?.source === ('first_login' as UrlSource)) {
-        // sign up
-        userInfo?.email && userInfo?.email !== ''
-          ? (() => {
-              // with email
-              ;(window as any).insider_object = {
-                user: {
-                  uuid: userInfo?.id,
-                  email: userInfo?.email,
-                  gdpr_optin: true,
-                  email_optin: true,
-                  sign_up: true,
-                  ...(userInfo?.name ? { name: userInfo?.name } : {}),
-                },
-              }
-            })()
-          : (() => {
-              // without email
-              ;(window as any).insider_object = {
-                user: {
-                  uuid: userInfo?.id,
-                  sign_up: true,
-                  ...(userInfo?.name ? { name: userInfo?.name } : {}),
-                },
-              }
-            })()
-      } else {
-        // log in
-        userInfo?.email && userInfo?.email !== ''
-          ? (() => {
-              // with email
-              ;(window as any).insider_object = {
-                user: {
-                  uuid: userInfo?.id,
-                  email: userInfo?.email,
-                  gdpr_optin: true,
-                  email_optin: true,
-                  log_in: true,
-                  ...(userInfo?.name ? { name: userInfo?.name } : {}),
-                },
-              }
-            })()
-          : (() => {
-              // without email
-              ;(window as any).insider_object = {
-                user: {
-                  uuid: userInfo?.id,
-                  log_in: true,
-                  ...(userInfo?.name ? { name: userInfo?.name } : {}),
-                },
-              }
-            })()
-      }
-    }
-
-    // get footer csr
-    ;(async () => {
-      const footerResult = !footerInfo
-        ? await (
-            await fetch(
-              siteType === 'helloSites'
-                ? getDiscoverDefaultFooterApiPath(locale, discoverApiDomain)
-                : getMarryBabyDefaultFooterApiPath(locale, marryBabyApiDomain),
-            )
-          ).json()
-        : null
-
-      if (
-        footerResult &&
-        footerResult.status === 1 &&
-        footerResult.data &&
-        !footerInfo
-      ) {
-        setFooterInfo(
-          siteType === 'helloSites'
-            ? footerResult.data || {}
-            : footerResult.data.footers || [],
-        )
-      }
-    })()
-
-    // get categories csr
-    ;(async () => {
-      const { response: categoriesResults = {} } =
-        // typeof window !== 'undefined' &&
-        (!categoriesSSR || categoriesSSR?.length === 0) &&
-        // (isMobile || popupType === 'categories') &&
-        categories?.length === 0
-          ? {
-              response: await (
-                await fetch(
-                  getDiscoverDefaultCategoriesApiPath(
-                    locale,
-                    discoverApiDomain,
-                  ),
-                )
-              ).json(),
-            }
-          : {}
-
-      if (
-        categoriesResults !== null &&
-        categoriesResults.status === 1 &&
-        categoriesResults.data?.length > 0
-      ) {
-        const categoriesFormatted: Category[] =
-          categoriesResults.data.map(formatCategory)
-
-        categories.length === 0 && setCategories(categoriesFormatted)
-      }
-    })()
-
-    // get spotlight
-    ;(async () => {
-      const { response: spotlightsResults = {} } =
-        // typeof window !== 'undefined' &&
-        (!spotlightsListSSR || spotlightsListSSR?.length === 0) &&
-        siteType === 'helloSites' &&
-        // (isMobile || popupType === 'categories') &&
-        spotlightsList?.length === 0
-          ? {
-              response: await (
-                await fetch(
-                  getDiscoverDefaultSpotlightsApiPath(
-                    locale,
-                    discoverApiDomain,
-                    {
-                      perPage: 100,
-                      orderBy: 'start_date',
-                    },
-                  ),
-                )
-              ).json(),
-            }
-          : {}
-
-      if (
-        spotlightsResults?.status === 1 &&
-        spotlightsResults?.data?.articles?.length > 0
-      ) {
-        const spotlightsFormatted: SpotlightSummary[] =
-          spotlightsResults.data?.articles
-            ?.map(formatSpotlightsList)
-            .filter(checkAvailableSpotlight)
-            .slice(0, 4)
-
-        spotlightsList.length === 0 && setSpotlightsList(spotlightsFormatted)
-      }
-    })()
-
-    // get health tools csr
-    ;(async () => {
-      const { response: healthToolsResults = {} } =
-        // typeof window !== 'undefined' &&
-        !healthToolsSSR?.length &&
-        !healthTools?.length &&
-        !healthToolsByCategorySSR?.length &&
-        !healthToolsByCategorySSR?.length
-          ? {
-              response: await (siteType === 'helloSites'
-                ? await fetch(
-                    getDiscoverDefaultHealthToolsByCategoryApiPath(
-                      locale,
-                      discoverApiDomain,
-                    ),
-                  )
-                : await fetch(
-                    getMarryBabyDefaultHealthToolsApiPath(
-                      locale,
-                      marryBabyApiDomain,
-                    ),
-                  )
-              ).json(),
-            }
-          : {}
-
-      if (
-        healthToolsResults !== null &&
-        healthToolsResults.status === 1 &&
-        healthToolsResults.data?.length > 0
-      ) {
-        if (siteType === 'helloSites') {
-          const healthToolsFormatted: HealthToolByCategory[] =
-            healthToolsResults.data.map(formatHealthToolTypeCategory)
-
-          if (healthTools.length === 0) {
-            setHealthToolsByCategory(healthToolsFormatted)
-            // setIsCategoryLoading(false)
-          }
-        } else {
-          const healthToolsFormatted: HealthTool[] =
-            healthToolsResults.data.map(formatHealthTool)
-
-          if (healthTools.length === 0) {
-            setHealthTools(healthToolsFormatted)
-            // setIsCategoryLoading(false)
-          }
-        }
-      }
-    })()
-
-    // get careSpecialties csr
-    ;(async () => {
-      const { response: careSpecialtiesResults = {} } =
-        // typeof window !== 'undefined' &&
-        (!careSpecialtiesSSR || careSpecialtiesSSR?.length === 0) &&
-        // (isMobile || popupType === 'care') &&
-        CARE_MENU_COUNTRIES_ENABLED.includes(locale) &&
-        careSpecialties?.length === 0
-          ? {
-              response: await (
-                await fetch(
-                  getCareDefaultSpecialtiesApiPath(locale, careApiDomain),
-                )
-              ).json(),
-            }
-          : {}
-
-      if (
-        careSpecialtiesResults !== null &&
-        careSpecialtiesResults._status === 1 &&
-        careSpecialtiesResults._data?.specialties?.length > 0
-      ) {
-        const careSpecialtiesFormatted: Specialty[] =
-          careSpecialtiesResults._data.specialties
-
-        if (careSpecialties.length === 0) {
-          setCareSpecialties(careSpecialtiesFormatted)
-          // setIsCategoryLoading(false)
-        }
-      }
-    })()
-
-    // get communities csr
-    ;(async () => {
-      const { response: communitiesResults = {} } =
-        // typeof window !== 'undefined' &&
-        (!togetherCommunitiesSSR || togetherCommunitiesSSR?.length === 0) &&
-        // (isMobile || popupType === 'communities') &&
-        TOGETHER_MENU_COUNTRIES_ENABLED.includes(locale) &&
-        communities?.length === 0
-          ? {
-              response: await (
-                await fetch(
-                  siteType === 'helloSites'
-                    ? getTogetherDefaultCommunitiesApiPath(
-                        locale,
-                        togetherApiDomain,
-                      )
-                    : getTogetherMarryBabyCommunitiesApiPath(
-                        locale,
-                        togetherApiDomain,
-                      ),
-                )
-              ).json(),
-            }
-          : {}
-
-      if (communitiesResults?.data?.communities?.length > 0) {
-        const communitiesFormatted: Community[] =
-          communitiesResults?.data?.communities?.map(formatCommunity) || []
-        if (communities.length === 0) {
-          setCommunities(communitiesFormatted)
-          // setIsCategoryLoading(false)
-        }
-      }
-    })()
-  }, [])
-
-  const profileMenu = (
-    <ProfilePopup
-      locale={locale}
-      UP_BASEPATH={UP_BASEPATH}
-      SSO_URL={SSO_URL}
-      userProfileRouterPush={userProfileRouterPush}
-      dispatchLogout={dispatchLogout}
-      isOpen={popupType === 'profile'}
-      isMyHealthEnabled={isMyHealthEnabled}
-      ENABLE_CARE_PROFILE_MENU_LOCALES={ENABLE_CARE_PROFILE_MENU_LOCALES}
-      ENABLE_COMMUNITY_PROFILE_MENU_LOCALES={
-        ENABLE_COMMUNITY_PROFILE_MENU_LOCALES
-      }
-      closePopup={closeMobilePopup}
-      userInfo={userInfo}
-      siteType={siteType}
-      isUserProfileNavigatorMenuHidden={isUserProfileNavigatorMenuHidden}
-      togetherApiDomain={togetherApiDomain}
-    />
-  )
-  const hideAMP = isAmp && { 'next-page-hide': '' }
-
-  return (
-    <Layout
-      SEOData={{
-        SEOTitle: MetaPageTitle,
-        SEOImage: MetaPageImage,
-        SEODescription: MetaPageDescription,
-        siteName,
-        seoType,
-        ...SEOData,
-      }}
-      isAmp={isAmp}
-      locale={locale}
-      routerPathname={routerPathname}
-      routerQuery={routerQuery}
-      nextHead={nextHead}
-      siteType={siteType}
-      forcedCanonicalUrl={forcedCanonicalUrl}
-      userId={userInfo?.id}
-      usingDefaultHead={usingDefaultHead}
-      seoCustom={seoCustom}
-    >
-      <NavigationLogoutPopup
-        basePath={basePath}
-        callPostLogOutApi={callPostLogOutApi}
-        openLogoutPopup={isLogoutPopupOpened}
-        onCloseHandler={onClosePopup}
-        onLogoutHandler={onLogout}
-        siteType={siteType}
-      />
-      {dueDatePopup}
-      {welcomePopup}
-      {acceptCookiePopup}
-      {isMobile ? (
-        <>
-          <StyledContainer>
-            <section
-              className={isAmp ? 'amp-header' : undefined}
-              next-page-replace="hhg-navigator"
-              amp-fx="float-in-top"
-              {...hideAMP}
-            >
-              <NavigationBar
-                siteType={siteType}
-                statics={{
-                  DISCOVER_URL_FE,
-                  SSO_URL,
-                  HOME_PAGE_URL,
-                  MARRY_BABY_FE,
-                  CARE_URL_FE,
-                }}
-                marryBaby={{ tone }}
-                menuItems={services}
-                menu={
-                  !isAmp ? (
-                    <MenuServiceList
-                      key={'mobile-menu-popup'}
-                      menuItems={services}
-                      siteType={siteType}
-                      isMobileMenuOpened={popupType === 'categories'}
-                      categories={categories}
-                      healthTools={healthTools}
-                      healthToolsByCategory={healthToolsByCategory}
-                      careSpecialties={careSpecialties}
-                      togetherCommunities={communities}
-                      spotlightsList={spotlightsList}
-                      onMobileMenuClick={onMenuCollapsed}
-                      isMobile={isMobile}
-                      closePopup={closeMobilePopup}
-                      footer={
-                        <CustomFooter
-                          locale={locale}
-                          isMobile={isMobile}
-                          basePath={basePath}
-                          isAmp={isAmp}
-                          footerInfo={footerInfo}
-                          type="mini"
-                          siteType={siteType}
-                          marryBabySocialLinks={{
-                            facebookLink,
-                            instagramLink,
-                            linkedinLink,
-                            twitterLink,
-                            youtubeLink,
-                            zaloLink,
-                          }}
-                        />
-                      }
-                      locale={locale}
-                      callApiHandler={callApiHandler}
-                      basePath={basePath}
-                      together={{
-                        TOGETHER_MENU_COUNTRIES_ENABLED,
-                        togetherApiDomain:
-                          togetherApiDomain || marryBabyApiDomain,
-                        TOGETHER_URL_FE,
-                      }}
-                      care={{
-                        CARE_MENU_COUNTRIES_ENABLED,
-                        careApiDomain,
-                        CARE_URL_FE,
-                      }}
-                      discover={{ discoverApiDomain, DISCOVER_URL_FE }}
-                      activeMenuService={activeMenuService}
-                      statics={{
-                        DISCOVER_URL_FE,
-                        HOME_PAGE_URL,
-                        HEALTH_TOOL_URL_FE,
-                        MARRY_BABY_FE,
-                        TOGETHER_URL_FE,
-                        STATIC_PAGES,
-                      }}
-                      marryBaby={{
-                        tone,
-                      }}
-                      routerAsPath={routerAsPath}
-                      popupType="none"
-                      sso={{
-                        SSO_URL,
-                      }}
-                    />
-                  ) : undefined
-                }
-                profileMenu={profileMenu}
-                type="home"
-                currentPopupType={popupType}
-                isMobile={isMobile}
-                isLoginButtonDisplayed
-                onMenuClick={onMenuCollapsed}
-                searchPlaceholder={f('home.search', {
-                  site:
-                    siteType === 'helloSites'
-                      ? LOCALE_SPEC?.SITE_NAME
-                      : 'Marry Baby',
-                })}
-                onTopBarAppears={(b: boolean) => {
-                  onTopBarAppears && onTopBarAppears(b)
-                }}
-                isSearchBarDisplay={isSearchBarDisplay}
-                onSearchKeyPress={onSearchKeyPress}
-                // onSearchChange={onSearchChanged}
-                isStatic={isAmp || isStatic}
-                sponsorComponent={sponsorComponent}
-                locale={locale}
-                userInfo={userState.userInfo}
-                basePath={basePath}
-                isAmp={isAmp}
-                isDisplayed
-                isInit={false}
-                onSearchChange={undefined}
-                openPopup={undefined}
-                routerAsPath={routerAsPath}
-                title={''}
-                sitewideBanner={sitewideBanner}
-                sitewideBannerShown={sitewideBannerShown}
-                isSearchIconDisplayed={isSearchIconDisplayed}
-                enabledExperimentalCareHeader={enabledExperimentalCareHeader}
-                languageMenu={
-                  typeof languageOptions !== 'undefined' &&
-                  languageOptions.length > 1 ? (
-                    <>
-                      {languageOptions.length === 2 && languageChange ? (
-                        <StyledLanguageChangeLink
-                          data-is-active={true}
-                          href={languageChange?.value || '#'}
-                        >
-                          {languageChange?.label}
-                        </StyledLanguageChangeLink>
-                      ) : (
-                        <TooltipSelection
-                          options={languageOptions}
-                          selected={selectedLanguage}
-                          label={languageSelectedLabel}
-                          onChange={(href) => {
-                            if (typeof window !== 'undefined') {
-                              window.location.href = href
-                            }
-                          }}
-                          style={{ width: 100 }}
-                          showSelected={true}
-                          showIndicator={false}
-                        />
-                      )}
-                    </>
-                  ) : undefined
-                }
-              />
-              {typeof ampSubBar !== 'undefined' && <>{ampSubBar}</>}
-            </section>
-            {!isAmp ? (
-              <StyledHomeContainer
-                className="root-container"
-                data-menu-opened={isMobilePopupOpened.current}
-                data-sponsored={isSponsored}
-                data-is-mobile={isMobile}
-                data-sitewide={!!sitewideBanner}
-                hasStickyBottomBar={hasStickyBottomBar}
-              >
-                <>
-                  {children}
-                  <CustomFooter
-                    isAmp={isAmp}
-                    isMobile={isMobile}
-                    locale={locale}
-                    basePath={basePath}
-                    footerInfo={footerInfo}
-                    type="main"
-                    siteType={siteType}
-                    marryBabySocialLinks={{
-                      facebookLink,
-                      instagramLink,
-                      linkedinLink,
-                      twitterLink,
-                      youtubeLink,
-                      zaloLink,
-                    }}
-                    ampNextArticle={ampNextArticle}
-                    routerQuery={routerQuery}
-                  />
-                </>
-              </StyledHomeContainer>
-            ) : (
-              <StyledAmpHomeContainer
-                className="root-container"
-                data-menu-opened={isMobilePopupOpened.current}
-                data-sponsored={isSponsored}
-                data-is-mobile={isMobile}
-                data-sitewide={!!sitewideBanner}
-              >
-                {children}
-                <CustomFooter
-                  isAmp={isAmp}
-                  isMobile={isMobile}
-                  locale={locale}
-                  basePath={basePath}
-                  footerInfo={footerInfo}
-                  type="main"
-                  siteType={siteType}
-                  marryBabySocialLinks={{
-                    facebookLink,
-                    instagramLink,
-                    linkedinLink,
-                    twitterLink,
-                    youtubeLink,
-                    zaloLink,
-                  }}
-                  ampNextArticle={ampNextArticle}
-                  routerQuery={routerQuery}
-                />
-              </StyledAmpHomeContainer>
-            )}
-          </StyledContainer>
-          {isAmp && (
-            <AmpSidebar
-              locale={locale}
-              categoriesSSR={categoriesSSR}
-              healthToolsSSR={healthToolsByCategorySSR}
-              spotlightsSSR={spotlightsListSSR}
-              serviceUrls={{
-                TOGETHER_URL_FE,
-                CARE_URL_FE,
-                DISCOVER_URL_FE,
-              }}
-              together={{
-                TOGETHER_MENU_COUNTRIES_ENABLED,
-                ENABLE_COMMUNITY_PROFILE_MENU_LOCALES,
-                togetherApiDomain,
-              }}
-              care={{
-                CARE_MENU_COUNTRIES_ENABLED,
-                ENABLE_CARE_PROFILE_MENU_LOCALES,
-                careApiDomain,
-              }}
-              basePath={basePath}
-              searchPlaceholder={f('home.search', {
-                site:
-                  siteType === 'helloSites'
-                    ? LOCALE_SPEC?.SITE_NAME
-                    : 'Marry Baby',
-              })}
-            />
-          )}
-        </>
-      ) : (
-        <>
-          <NavigationBar
-            siteType={siteType}
-            menuItems={services}
-            marryBaby={{ tone }}
-            locale={locale}
-            currentPopupType={popupType}
-            onSearchKeyPress={onSearchKeyPress}
-            openPopup={openDesktopPopup}
-            isMobile={isMobile}
-            isLoginButtonDisplayed
-            // onSearchChange={onSearchChanged}
-            isSearchBarDisplay={!isAmp && isSearchBarDisplay}
-            searchPlaceholder={f('home.search', {
-              site:
-                siteType === 'helloSites'
-                  ? LOCALE_SPEC?.SITE_NAME
-                  : 'Marry Baby',
-            })}
-            sitewideBannerShown={sitewideBannerShown}
-            statics={{
-              DISCOVER_URL_FE,
-              SSO_URL,
-              HOME_PAGE_URL,
-              MARRY_BABY_FE,
-              CARE_URL_FE,
-            }}
-            menu={
-              <MenuServiceList
-                menuItems={services}
-                siteType={siteType}
-                isMobile={isMobile}
-                popupType={popupType}
-                closePopup={closeDesktopPopup}
-                categories={categories}
-                healthTools={healthTools}
-                healthToolsByCategory={healthToolsByCategory}
-                careSpecialties={careSpecialties}
-                togetherCommunities={communities}
-                spotlightsList={spotlightsList}
-                locale={locale}
-                callApiHandler={callApiHandler}
-                basePath={basePath}
-                together={{
-                  TOGETHER_MENU_COUNTRIES_ENABLED,
-                  togetherApiDomain,
-                  TOGETHER_URL_FE,
-                }}
-                care={{
-                  careApiDomain,
-                  CARE_MENU_COUNTRIES_ENABLED,
-                  CARE_URL_FE,
-                }}
-                discover={{ discoverApiDomain, DISCOVER_URL_FE }}
-                statics={{
-                  DISCOVER_URL_FE,
-                  HOME_PAGE_URL,
-                  HEALTH_TOOL_URL_FE,
-                  MARRY_BABY_FE,
-                  TOGETHER_URL_FE,
-                  STATIC_PAGES,
-                }}
-                activeMenuService={activeMenuService}
-                marryBaby={{
-                  tone,
-                }}
-                routerAsPath={routerAsPath}
-                footer={undefined}
-                isMobileMenuOpened={undefined}
-                sso={{
-                  SSO_URL,
-                }}
-                onMobileMenuClick={undefined}
-              />
-            }
-            profileMenu={profileMenu}
-            userInfo={userState.userInfo}
-            sponsorComponent={sponsorComponent}
-            type="home"
-            basePath={basePath}
-            isAmp={isAmp}
-            isDisplayed
-            isInit={false}
-            onSearchChange={undefined}
-            isStatic={false}
-            routerAsPath={routerAsPath}
-            title={''}
-            onMenuClick={undefined}
-            onTopBarAppears={undefined}
-            sitewideBanner={sitewideBanner}
-            languageMenu={
-              typeof languageOptions !== 'undefined' &&
-              languageOptions.length > 1 ? (
-                <>
-                  {languageOptions.length === 2 && languageChange ? (
-                    <StyledLanguageChangeLink
-                      data-is-active={true}
-                      href={languageChange?.value || '#'}
-                    >
-                      {languageChange?.label}
-                    </StyledLanguageChangeLink>
-                  ) : (
-                    <TooltipSelection
-                      options={languageOptions}
-                      selected={selectedLanguage}
-                      label={languageSelectedLabel}
-                      onChange={(href) => {
-                        if (typeof window !== 'undefined') {
-                          window.location.href = href
-                        }
-                      }}
-                      style={{ width: 100 }}
-                      showSelected={true}
-                      showIndicator={false}
-                    />
-                  )}
-                </>
-              ) : undefined
-            }
-            enabledExperimentalCareHeader={enabledExperimentalCareHeader}
-            onCareHeaderClick={onCareHeaderClick}
-          />
-          {!isAmp ? (
-            <StyledHomeContainer
-              className="root-container"
-              data-menu-opened={isMobilePopupOpenedFlag}
-              data-is-mobile={isMobile}
-              data-sponsored={isSponsored}
-              data-sitewide={!!sitewideBanner}
-              hasStickyBottomBar={hasStickyBottomBar}
-            >
-              {children}
-            </StyledHomeContainer>
-          ) : (
-            <StyledAmpHomeContainer
-              className="root-container"
-              data-menu-opened={isMobilePopupOpenedFlag}
-              data-is-mobile={isMobile}
-              data-sponsored={isSponsored}
-              data-sitewide={!!sitewideBanner}
-            >
-              {children}
-            </StyledAmpHomeContainer>
-          )}
-          <CustomFooter
-            type="main"
-            locale={locale}
-            basePath={basePath}
-            isMobile={isMobile}
-            isAmp={isAmp}
-            footerInfo={footerInfo}
-            siteType={siteType}
-            marryBabySocialLinks={{
-              facebookLink,
-              instagramLink,
-              linkedinLink,
-              twitterLink,
-              youtubeLink,
-              zaloLink,
-            }}
-          />
-        </>
-      )}
-    </Layout>
-  )
-}
-
-export { NavigationLayout }