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

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

@@ -0,0 +1,746 @@
+import React, { useEffect, useState } from 'react'
+
+// import { Button } from 'components/atoms/button'
+// import { Container } from 'components/atoms/container'
+import { PureInput } from 'components/atoms'
+import { Heading } from 'components/atoms/heading'
+import {
+  // formatCategory,
+  // formatCommunity,
+  // formatHealthTool,
+  // getCareDefaultSpecialtiesApiPath,
+  getCareSearchUrl,
+  // getDiscoverDefaultCategoriesApiPath,
+  // getDiscoverDefaultHealthToolsApiPath,
+  // getTogetherDefaultCommunitiesApiPath,
+  // getTogetherMarryBabyCommunitiesApiPath,
+  useTranslation,
+} from 'components/organisms/navigationLayout/utils'
+import { LocaleType } from 'interfaces/types'
+// eslint-disable-next-line import/order
+import { theme } from 'misc/theme'
+// import nextId from 'react-id-generator'
+
+// import { domainLocales } from '../constants'
+import { getCurrentBaseUrl } from 'together/api/utils'
+
+import { LOCALE_SPECS } from '../constants'
+import { MenuCareList } from '../menuCareList'
+import { MenuCategoriesList } from '../menuCategoriesList'
+import { MenuCommunitiesList } from '../menuCommunitiesList'
+import { MenuHealthToolsList } from '../menuHealthToolsList'
+import { MenuSectionCard } from '../menuSectionCard'
+import { NavigationBar } from '../navigationBar'
+import { SearchIcon } from '../navigationBar/SearchIcon'
+import {
+  Category,
+  Community,
+  DesktopMenuPopup,
+  HealthTool,
+  HealthToolByCategory,
+  MenuItemType,
+  MenuServiceType,
+  MobileMenuPopup,
+  SiteType,
+  Specialty,
+  SpotlightSummary,
+} from '../types'
+import { MenuSubItemListCategory } from './categoriesSubList'
+import { MenuSubItemListCommunities } from './communitySubList'
+import {
+  StyledCardSpecialty,
+  // StyledCategoryButtonWrapper,
+  StyledMenuContainer,
+  StyledScrollingCategories,
+  StyledScrollingWrapper,
+  // StyledButtonContainerWrapper,
+  StyledScrollingContent,
+  // StyledCategoryFooter,
+  StyledMasterMenuContainer,
+  StyledStickyHeader,
+  StyledServiceListMenuSearchInputWrapper,
+  // StyledMenuPopupWrapper,
+  // StyleMenuPopupContainer,
+  // StyledCategoryItemAll,
+  // StyledImageWrapper,
+  // StyledCloseWrapper,
+  // StyledMenuPopupContainer,
+  // StyledFakeTopAlignment,
+  // StyledHealthToolItem,
+} from './index.styled'
+import { MarryBabyMobileMenuShelf } from './marryBabyMobileMenuSection'
+
+export type Props = {
+  categories: Category[]
+  healthTools?: HealthTool[]
+  healthToolsByCategory?: HealthToolByCategory[]
+  careSpecialties: Specialty[]
+  togetherCommunities: Community[]
+  spotlightsList: SpotlightSummary[]
+  // isHealthToolsDisable?: boolean
+  // isCategoriesDisable?: boolean
+  // isCommunitiesDisable?: boolean
+  // isCareSpecialtiesDisable?: boolean
+  popupType: DesktopMenuPopup
+  // isPopupOpen: boolean
+  isMobileMenuOpened: boolean
+  isMobile: boolean
+  // className: string
+  footer: JSX.Element
+  care: {
+    careApiDomain: string
+    CARE_MENU_COUNTRIES_ENABLED: LocaleType[]
+    CARE_URL_FE: string
+  }
+  discover?: {
+    discoverApiDomain: string
+    DISCOVER_URL_FE: string
+  }
+  together: {
+    togetherApiDomain: string
+    TOGETHER_URL_FE: string
+    TOGETHER_MENU_COUNTRIES_ENABLED: string[]
+  }
+  marryBaby: {
+    tone: 'white' | 'pink'
+  }
+  sso: {
+    SSO_URL: string
+  }
+  statics: {
+    DISCOVER_URL_FE: string
+    HEALTH_TOOL_URL_FE: string
+    TOGETHER_URL_FE: string
+    MARRY_BABY_FE: string
+    HOME_PAGE_URL: string
+    STATIC_PAGES: {
+      [key in LocaleType]: {
+        [key: string]: string | null
+      }
+    }
+  }
+  locale: LocaleType
+  siteType: SiteType
+  basePath: string
+  activeMenuService: MenuServiceType
+  menuItems: MenuItemType[]
+  routerAsPath: string
+  closePopup: () => void
+  onMobileMenuClick: (s: MobileMenuPopup) => void
+  callApiHandler: (p: string, m: 'GET' | 'POST' | 'PUT') => any
+}
+
+const MenuServiceList = ({
+  isMobile = false,
+  isMobileMenuOpened: isMainMenuOpened = undefined,
+  categories,
+  healthTools,
+  healthToolsByCategory,
+  careSpecialties,
+  togetherCommunities,
+  spotlightsList,
+  closePopup,
+  popupType = 'none',
+  onMobileMenuClick,
+  footer: CustomFooter,
+  care: { CARE_URL_FE },
+  discover: { discoverApiDomain, DISCOVER_URL_FE },
+  together: {
+    togetherApiDomain,
+    TOGETHER_URL_FE,
+    // TOGETHER_MENU_COUNTRIES_ENABLED,
+  },
+  sso: { SSO_URL },
+  statics: { MARRY_BABY_FE, HOME_PAGE_URL, STATIC_PAGES, HEALTH_TOOL_URL_FE },
+  marryBaby: { tone },
+  locale,
+  siteType,
+  basePath,
+  callApiHandler,
+  activeMenuService,
+  menuItems,
+  routerAsPath,
+}: Props) => {
+  const f = useTranslation()
+
+  const [isOnSubLevel, setIsOnSubLevel] = useState(false)
+
+  const [searchResultCategories, setSearchResultCategories] =
+    useState<Category[]>(categories)
+
+  const [selectedMenuMainItem, setSelectedMenuMainItem] = useState<
+    Category | Community | undefined
+  >(undefined)
+  const [menuSubList, setMenuSubList] = useState(undefined)
+  // const [isCategoryLoading, setIsCategoryLoading] = useState(true)
+  const [headerHideOnSearch, setHeaderHideOnSearch] = useState(false)
+  const [activeService, setActiveService] = useState(
+    menuItems?.find((s) => s.id === activeMenuService),
+  )
+  const [isInit, setIsInit] = useState(false)
+  const [enableAnimation, setEnableAnimation] = useState(false)
+
+  const onCategoryClick = () => {
+    selectedMenuMainItem &&
+      (window.location.href = (selectedMenuMainItem as Category).permalink)
+    onSubMenuItemBack()
+    closePopup && closePopup()
+  }
+
+  const onCommunityClick = () => {
+    selectedMenuMainItem &&
+      (window.location.href = `${TOGETHER_URL_FE}/${
+        (selectedMenuMainItem as Community).communitySlug
+      }`)
+    onSubMenuItemBack()
+    closePopup && closePopup()
+  }
+
+  const onSelectCategory = (category: Category) => {
+    if (category.childCates && category.childCates.length > 0) {
+      setIsOnSubLevel(true)
+      setSelectedMenuMainItem(category)
+    } else {
+      window.location.href =
+        siteType === 'helloSites'
+          ? DISCOVER_URL_FE + category.permalink
+          : MARRY_BABY_FE + category.permalink
+
+      onSubMenuItemBack()
+      closePopup && closePopup()
+    }
+  }
+
+  const onSelectCommunity = ({
+    community,
+    isSetToSubMenu,
+  }: {
+    community: Community
+    isSetToSubMenu: boolean
+  }) => {
+    if (isSetToSubMenu) {
+      setIsOnSubLevel(true)
+      setSelectedMenuMainItem(community)
+    } else {
+      window.location.href = `${TOGETHER_URL_FE}/${community.communitySlug}`
+
+      onSubMenuItemBack()
+      closePopup && closePopup()
+    }
+  }
+
+  const onSelectHealthTool = (healthTool: HealthTool) => {
+    // if (healthTool.link.startsWith('https')) {
+    window.location.href = healthTool.link.startsWith('http')
+      ? healthTool.link
+      : HEALTH_TOOL_URL_FE + healthTool.link
+    // } else {
+    // router.push(healthTool.link)
+    // }
+
+    onSubMenuItemBack()
+    closePopup && closePopup()
+  }
+
+  const onSelectCareSpecialty = (careSpecialty: Specialty) => {
+    window.location.href =
+      CARE_URL_FE +
+      getCareSearchUrl({
+        type: 'DOCTOR',
+        specialtySlug: careSpecialty.slug,
+        locale,
+      })
+
+    closePopup?.()
+  }
+
+  const onSubMenuItemBack = () => {
+    setSelectedMenuMainItem(undefined)
+    setIsOnSubLevel(false)
+  }
+
+  const onServiceClicked = (id: MenuServiceType) => {
+    setActiveService(menuItems.find((s) => s.id === id))
+  }
+
+  const onSearchChange = (v: string) => {
+    v !== '' ? setHeaderHideOnSearch(true) : setHeaderHideOnSearch(false)
+
+    setSearchResultCategories(
+      v && v !== ''
+        ? categories.filter(
+            (category) =>
+              category.categoryName.toLowerCase().search(v.toLowerCase()) >
+                -1 ||
+              category.slug
+                .replace('-', '')
+                .toLowerCase()
+                .search(v.replace(' ', '').toLowerCase()) > -1,
+          )
+        : categories,
+    )
+  }
+
+  const LOCALE_SPEC = LOCALE_SPECS[locale || 'en-PH'] || {}
+
+  useEffect(() => {
+    setMenuSubList(
+      activeService.id === 'categories'
+        ? (selectedMenuMainItem as Category)?.childCates?.length > 0 && (
+            <MenuSubItemListCategory
+              selectedMenuMainItem={selectedMenuMainItem as Category}
+              spotlightsList={[]}
+              locale={locale}
+              basePath={basePath}
+              callApiHandler={callApiHandler}
+              discoverApiDomain={discoverApiDomain}
+              DISCOVER_URL_FE={DISCOVER_URL_FE}
+              MARRY_BABY_FE={MARRY_BABY_FE}
+              onSelectCategory={onSelectCategory}
+              isMobile={isMobile}
+              siteType={siteType}
+              onCategoryClick={onCategoryClick}
+            />
+          )
+        : activeService.id === 'together' &&
+            // siteType === 'marryBaby' &&
+            (selectedMenuMainItem as Community) && (
+              <MenuSubItemListCommunities
+                selectedMenuMainItem={selectedMenuMainItem as Community}
+                onCommunityClick={onCommunityClick}
+                onSelectCommunity={onSelectCommunity}
+                TOGETHER_URL_FE={TOGETHER_URL_FE}
+                basePath={basePath}
+                callApiHandler={callApiHandler}
+                locale={locale}
+                togetherApiDomain={togetherApiDomain}
+                siteType={siteType}
+                isMobile={isMobile}
+              />
+            ),
+    )
+  }, [selectedMenuMainItem, activeService])
+
+  useEffect(() => {
+    setIsInit(true)
+  }, [])
+
+  useEffect(() => {
+    !enableAnimation &&
+      isMainMenuOpened &&
+      (() => {
+        setEnableAnimation(true)
+      })()
+  }, [isMainMenuOpened])
+
+  useEffect(() => {
+    setSearchResultCategories(categories)
+  }, [categories])
+
+  return isMobile ? (
+    <>
+      <StyledMasterMenuContainer
+        id={!isInit ? 'categories-menu' : ''}
+        data-opened={
+          isMainMenuOpened || (enableAnimation ? isMainMenuOpened : 'undefined')
+        }
+        key={isInit ? 't' : 'f'}
+      >
+        <StyledMenuContainer
+          data-opened={isMainMenuOpened}
+          data-type="category"
+          data-is-sub-category-opened={isOnSubLevel}
+        >
+          <NavigationBar
+            siteType={siteType}
+            locale={locale}
+            isDisplayed
+            searchPlaceholder={''}
+            statics={{
+              DISCOVER_URL_FE,
+              SSO_URL,
+              HOME_PAGE_URL,
+              MARRY_BABY_FE,
+              CARE_URL_FE,
+            }}
+            isMobile={isMobile}
+            isLoginButtonDisplayed={false}
+            type="popup"
+            onMenuClick={() => onMobileMenuClick?.('categories')}
+            onSearchChange={onSearchChange}
+            isSearchBarDisplay={false}
+            basePath={basePath}
+            isAmp={false}
+            isInit={false}
+            isStatic={false}
+            routerAsPath={routerAsPath}
+            title={''}
+            onTopBarAppears={undefined}
+            currentPopupType={'none'}
+            marryBaby={{ tone }}
+            menu={undefined}
+            menuItems={undefined}
+            onSearchKeyPress={undefined}
+            openPopup={undefined}
+            profileMenu={undefined}
+            userInfo={undefined}
+          />
+          {/* main category menu */}
+          <StyledScrollingCategories>
+            <StyledScrollingWrapper>
+              <StyledScrollingContent>
+                <StyledStickyHeader
+                  data-hide-on-search={headerHideOnSearch}
+                  // data-opened={isOpened}
+                  data-is-sub-category-opened={isOnSubLevel}
+                >
+                  {siteType === 'helloSites' ? (
+                    <>
+                      <StyledServiceListMenuSearchInputWrapper
+                        onClick={() => {
+                          window.location.href = `${getCurrentBaseUrl(
+                            locale,
+                          )}/search`
+                        }}
+                      >
+                        <PureInput
+                          className="fake-search-input"
+                          name={
+                            'search-input-' +
+                            'menu-service' +
+                            (!isInit ? '-temp' : '')
+                          }
+                          size="md"
+                          placeholder={f('home.search', {
+                            site: LOCALE_SPEC ? LOCALE_SPEC.SITE_NAME : '',
+                          })}
+                          onChange={() => undefined}
+                          type="search"
+                          autoFocus={false}
+                          onFocus={(e) => {
+                            e.preventDefault()
+                          }}
+                          value=""
+                          displayIcon={
+                            <a
+                              data-event-category="Search Button"
+                              data-event-action="Click"
+                            >
+                              <SearchIcon />
+                            </a>
+                          }
+                        />
+                      </StyledServiceListMenuSearchInputWrapper>
+
+                      <Heading tag="h5" color={theme.colors.gray800}>
+                        {f('menu.categories.title')}
+                      </Heading>
+                      <StyledCardSpecialty
+                        data-card-array-no-margin-style={true}
+                      >
+                        {menuItems.map((service, i) => (
+                          <MenuSectionCard
+                            onClick={onServiceClicked}
+                            key={'service-' + i}
+                            specialty={service}
+                            id={service.id}
+                            isActive={service.id === activeService.id}
+                            isMobile={isMobile}
+                            position={
+                              i === 0
+                                ? 'left'
+                                : i === menuItems.length - 1
+                                ? 'right'
+                                : 'center'
+                            }
+                          />
+                        ))}
+                      </StyledCardSpecialty>
+                    </>
+                  ) : (
+                    <MarryBabyMobileMenuShelf
+                      menuItems={menuItems}
+                      activeItem={activeService}
+                      onServiceClicked={onServiceClicked}
+                    />
+                  )}
+                </StyledStickyHeader>
+                <MenuCategoriesList
+                  isDisplayed={activeService.id === 'categories'}
+                  locale={locale}
+                  basePath={basePath}
+                  callApiHandler={callApiHandler}
+                  onClosePopup={closePopup}
+                  discoverApiDomain={discoverApiDomain}
+                  DISCOVER_URL_FE={DISCOVER_URL_FE}
+                  MARRY_BABY_FE={MARRY_BABY_FE}
+                  type="main"
+                  onSelectCategory={onSelectCategory}
+                  categories={
+                    // categoriesSSR && categoriesSSR.length > 0
+                    // ? categoriesSSR
+                    // :
+                    searchResultCategories
+                  }
+                  spotlightsList={spotlightsList}
+                  isLoading={
+                    // categoriesSSR && categoriesSSR.length > 0
+                    // ?
+                    false
+                    // : isCategoryLoading
+                  }
+                  isMobile={isMobile}
+                  siteType={siteType}
+                  desktopPopupType={popupType}
+                />
+
+                <MenuHealthToolsList
+                  isDisplayed={activeService.id === 'healthTools'}
+                  locale={locale}
+                  basePath={basePath}
+                  // callApiHandler={callApiHandler}
+                  discoverApiDomain={discoverApiDomain}
+                  HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+                  onSelectHealthTool={onSelectHealthTool}
+                  onClosePopup={closePopup}
+                  desktopPopupType={popupType}
+                  healthTools={
+                    // healthToolsSSR && healthToolsSSR.length > 0
+                    //   ? healthToolsSSR
+                    // :
+                    healthTools
+                  }
+                  healthToolsByCategory={healthToolsByCategory}
+                  isLoading={
+                    // healthToolsSSR && healthToolsSSR.length > 0
+                    // ?
+                    false
+                    // : isCategoryLoading
+                  }
+                  isMobile={isMobile}
+                  siteType={siteType}
+                  STATIC_PAGES={STATIC_PAGES}
+                />
+                {activeService.id === 'care' && (
+                  <MenuCareList
+                    locale={locale}
+                    basePath={basePath}
+                    onSelectCareSpecialty={onSelectCareSpecialty}
+                    onClosePopup={closePopup}
+                    careSpecialties={
+                      // careSpecialtiesSSR && careSpecialtiesSSR.length > 0
+                      //   ? careSpecialtiesSSR
+                      // :
+                      careSpecialties
+                    }
+                    isLoading={
+                      // careSpecialtiesSSR && careSpecialtiesSSR.length > 0
+                      // ?
+                      false
+                      // : isCategoryLoading
+                    }
+                    // callApiHandler={callApiHandler}
+                    siteType={siteType}
+                    isMobile={isMobile}
+                    desktopPopupType={popupType}
+                    CARE_URL_FE={CARE_URL_FE}
+                  />
+                )}
+                <MenuCommunitiesList
+                  isDisplayed={activeService.id === 'together'}
+                  locale={locale}
+                  TOGETHER_URL_FE={TOGETHER_URL_FE}
+                  basePath={basePath}
+                  type="main"
+                  onSelectCommunity={onSelectCommunity}
+                  onClosePopup={closePopup}
+                  communities={
+                    // togetherCommunitiesSSR &&
+                    // togetherCommunitiesSSR.length > 0
+                    //   ? togetherCommunitiesSSR
+                    // :
+                    togetherCommunities
+                  }
+                  isLoading={
+                    // togetherCommunitiesSSR &&
+                    // togetherCommunitiesSSR.length > 0
+                    // ?
+                    false
+                    // : isCategoryLoading
+                  }
+                  isMobile={isMobile}
+                  siteType={siteType}
+                  togetherApiDomain={togetherApiDomain}
+                  desktopPopupType={popupType}
+                />
+              </StyledScrollingContent>
+              {CustomFooter}
+            </StyledScrollingWrapper>
+          </StyledScrollingCategories>
+        </StyledMenuContainer>
+      </StyledMasterMenuContainer>
+      {isOnSubLevel && (
+        <StyledMasterMenuContainer
+          data-sub-level-opened={
+            isOnSubLevel || (enableAnimation ? isOnSubLevel : 'undefined')
+          }
+        >
+          <StyledMenuContainer
+            data-type="sub-category"
+            data-is-sub-category-opened={isOnSubLevel}
+          >
+            <NavigationBar
+              siteType={siteType}
+              locale={locale}
+              isDisplayed={isMainMenuOpened && isOnSubLevel}
+              searchPlaceholder={''}
+              menuItems={undefined}
+              statics={{
+                DISCOVER_URL_FE,
+                SSO_URL,
+                HOME_PAGE_URL,
+                MARRY_BABY_FE,
+                CARE_URL_FE,
+              }}
+              isMobile={isMobile}
+              isLoginButtonDisplayed={false}
+              type="popup-sub-level"
+              title={
+                activeService.id === 'categories'
+                  ? (selectedMenuMainItem as Category)?.categoryName
+                  : (selectedMenuMainItem as Community)?.title
+              }
+              isSearchBarDisplay={false}
+              basePath={basePath}
+              isAmp={false}
+              isInit={false}
+              isStatic={false}
+              routerAsPath={routerAsPath}
+              currentPopupType={'none'}
+              marryBaby={{ tone }}
+              menu={undefined}
+              openPopup={undefined}
+              profileMenu={undefined}
+              userInfo={undefined}
+              onSearchKeyPress={undefined}
+              onTopBarAppears={undefined}
+              onMenuClick={onSubMenuItemBack}
+              onSearchChange={undefined}
+            />
+            {menuSubList}
+          </StyledMenuContainer>
+        </StyledMasterMenuContainer>
+      )}
+    </>
+  ) : (
+    <>
+      <MenuCategoriesList
+        isDisplayed={popupType === 'categories'}
+        locale={locale}
+        basePath={basePath}
+        callApiHandler={callApiHandler}
+        discoverApiDomain={discoverApiDomain}
+        DISCOVER_URL_FE={DISCOVER_URL_FE}
+        MARRY_BABY_FE={MARRY_BABY_FE}
+        type="main"
+        desktopPopupType={popupType}
+        onSelectCategory={onSelectCategory}
+        onClosePopup={closePopup}
+        categories={
+          // categoriesSSR && categoriesSSR.length > 0
+          //   ? categoriesSSR
+          // :
+          searchResultCategories
+        }
+        spotlightsList={spotlightsList}
+        isLoading={
+          // categoriesSSR && categoriesSSR.length > 0
+          // ?
+          false
+          // : isCategoryLoading
+        }
+        isMobile={isMobile}
+        siteType={siteType}
+      />
+      <MenuHealthToolsList
+        isDisplayed={popupType === 'tools'}
+        locale={locale}
+        basePath={basePath}
+        // callApiHandler={callApiHandler}
+        discoverApiDomain={discoverApiDomain}
+        HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+        desktopPopupType={popupType}
+        onSelectHealthTool={onSelectHealthTool}
+        onClosePopup={closePopup}
+        healthToolsByCategory={healthToolsByCategory}
+        healthTools={
+          // healthToolsSSR && healthToolsSSR.length > 0
+          //   ? healthToolsSSR
+          // :
+          healthTools
+        }
+        isLoading={
+          // healthToolsSSR && healthToolsSSR.length > 0
+          // ?
+          false
+          // : isCategoryLoading
+        }
+        isMobile={isMobile}
+        siteType={siteType}
+        STATIC_PAGES={STATIC_PAGES}
+      />
+      <MenuCommunitiesList
+        isDisplayed={popupType === 'communities'}
+        locale={locale}
+        TOGETHER_URL_FE={TOGETHER_URL_FE}
+        basePath={basePath}
+        type="main"
+        onSelectCommunity={onSelectCommunity}
+        communities={
+          // togetherCommunitiesSSR && togetherCommunitiesSSR.length > 0
+          //   ? togetherCommunitiesSSR
+          // :
+          togetherCommunities
+        }
+        isLoading={
+          // togetherCommunitiesSSR && togetherCommunitiesSSR.length > 0
+          //   ?
+          false
+          // : isCategoryLoading
+        }
+        isMobile={isMobile}
+        siteType={siteType}
+        togetherApiDomain={togetherApiDomain}
+        desktopPopupType={popupType}
+        onClosePopup={closePopup}
+      />
+      {popupType === 'care' && (
+        <MenuCareList
+          locale={locale}
+          basePath={basePath}
+          onSelectCareSpecialty={onSelectCareSpecialty}
+          careSpecialties={
+            // careSpecialtiesSSR && careSpecialtiesSSR.length > 0
+            //   ? careSpecialtiesSSR
+            // :
+            careSpecialties
+          }
+          isLoading={
+            // careSpecialtiesSSR && careSpecialtiesSSR.length > 0
+            // ?
+            false
+            // : isCategoryLoading
+          }
+          // callApiHandler={callApiHandler}
+          desktopPopupType={popupType}
+          siteType={siteType}
+          isMobile={isMobile}
+          CARE_URL_FE={CARE_URL_FE}
+          onClosePopup={closePopup}
+        />
+      )}
+    </>
+  )
+}
+
+export { MenuServiceList }