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

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

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