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

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

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