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

package/src/components/organisms/navigationV2/hooks/useNavServices.tsx

@@ -1,73 +0,0 @@
-import { useContext, useMemo } from 'react'
-
-import {
-  DiscoverIcon,
-  HealthToolsIcon,
-  HelloCareIcon,
-  TogetherIcon,
-} from 'src/assets/svg'
-import { useTranslations } from 'src/hooks/useTranslations'
-import { STATIC_PAGES } from 'src/interfaces/constants'
-
-import { NavigationContext } from '../navigationContext'
-import { MenuItemType, MenuServiceType } from '../types'
-
-export const useNavServices = () => {
-  const { t, locale } = useTranslations()
-  const {
-    configs: { enableNavCare, enableNavTogether, enableNavEcom, statics },
-  } = useContext(NavigationContext)
-
-  const services = useMemo(() => {
-    const _services: MenuItemType[] = [
-      {
-        name: t('home.navigator.menuItem.discover'),
-        id: 'categories' as MenuServiceType,
-        link: `${statics.HOME_PAGE_URL}${
-          locale === 'tl-PH' ? '/fil' : ''
-        }/categories`,
-        niceName: '',
-        thumbnail: DiscoverIcon,
-        popupType: 'categories',
-      },
-      {
-        name: t('home.navigator.menuItem.healthTools'),
-        id: 'tools' as MenuServiceType,
-        link: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}${
-          STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
-        }`,
-        thumbnail: HealthToolsIcon,
-        popupType: 'tools',
-      },
-    ]
-
-    enableNavCare &&
-      _services.push({
-        name: t('home.navigator.menuItem.helloCare'),
-        id: 'care' as MenuServiceType,
-        link: statics.HOME_PAGE_URL + '/care',
-        thumbnail: HelloCareIcon,
-        popupType: 'care',
-      })
-
-    enableNavTogether &&
-      _services.push({
-        name: t('home.navigator.menuItem.helloTogether'),
-        id: 'together' as MenuServiceType,
-        link: statics.TOGETHER_URL_FE + '/',
-        thumbnail: TogetherIcon,
-        popupType: 'together',
-      })
-
-    enableNavEcom &&
-      _services.push({
-        name: t('home.navigator.menuItem.helloEcom'),
-        id: 'ecom' as MenuServiceType,
-        link: statics.HOME_PAGE_URL + '/ecom',
-        thumbnail: HelloCareIcon,
-        popupType: 'shop',
-      })
-    return _services
-  }, [locale, enableNavCare, enableNavTogether, enableNavEcom])
-  return services
-}

package/src/components/organisms/navigationV2/index.stories.tsx

@@ -1,287 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { CloseWhiteIcon } from '../../../assets/svg'
-import { SiteWide } from '../navigationLayout/siteWide'
-import { StickySponsoredBy } from '../navigationLayout/sponsoredBy'
-import {
-  getNavMenuContent,
-  NavigationV2,
-  NavMenuContentType,
-  Props,
-} from './index'
-
-export default {
-  component: NavigationV2,
-  title: 'Organisms/NavigationV2',
-}
-
-const Template: Story<Props> = (args, { globals: { locale } }) => {
-  const [data, setData] = useState<NavMenuContentType>(
-    args.ssrMenuContent || {},
-  )
-  useEffect(() => {
-    getNavMenuContent(locale).then(setData)
-  }, [locale])
-  return (
-    <NavigationV2
-      {...args}
-      locale={args.locale || locale}
-      ssrMenuContent={data}
-    />
-  )
-}
-
-export const MobileHelloBacsi = Template.bind({})
-export const DesktopHelloBacsi = Template.bind({})
-export const DesktopHelloBacsiWithSiteWide = Template.bind({})
-// export const DesktopHelloBacsiWithLanguage = Template.bind({})
-export const DesktopHelloBacsiWithSponsor = Template.bind({})
-export const LoggedInDesktopHelloBacsi = Template.bind({})
-export const LoggedInMobileHelloBacsi = Template.bind({})
-export const HelloBacsiAmp = Template.bind({})
-
-const defaultProps: Props = {
-  isMobile: false,
-  ssrMenuContent: {
-    categories: {
-      items: Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          iconUrl: `https://picsum.photos/id/${200 + i}/200/300`,
-          categoryName: 'cat ' + i,
-          name: 'cat ' + i,
-          slugName: 'slug-' + i,
-          imageColor: '#fff',
-          displayName: 'cat ' + i,
-          permalink: 'slug-' + i,
-          slug: 'slug-' + i,
-          childCates: [],
-        })),
-      spotlights: Array(3)
-        .fill(null)
-        .map((_, i) => ({
-          id: i,
-          name: 'spotlight ' + i,
-          permalink: 'slug-' + i,
-          image: `https://picsum.photos/id/${220 + i}/200/300`,
-          imageMedium: `https://picsum.photos/id/${220 + i}/200/300`,
-          imageThumbnail: `https://picsum.photos/id/${220 + i}/200/300`,
-          startDate: '2020-01-01',
-          endDate: '2020-01-01',
-        })),
-    },
-    healthTools: {
-      items: Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          title: 'health tool ' + i,
-          subtitle: 'subtitle ' + i,
-          icon: `https://picsum.photos/id/${200 + i}/40/40`,
-          link: 'https://www.google.com',
-        })),
-      spotlights: Array(3)
-        .fill(null)
-        .map((_, i) => ({
-          title: 'health tool ' + i,
-          subtitle: 'subtitle ' + i,
-          icon: `https://picsum.photos/id/${220 + i}/40/40`,
-          link: 'https://www.google.com',
-        })),
-    },
-    care: {
-      items: Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          name: 'care ' + i,
-          id: i,
-          thumbnail: `https://picsum.photos/id/${200 + i}/200/300`,
-          total_doctor: 100 + i * 10,
-          slug: 'slug-' + i,
-        })),
-      spotlights: Array(3)
-        .fill(null)
-        .map((_, i) => ({
-          id: i,
-          name: 'hospital ' + i,
-          description: 'description ' + i,
-          logo: `https://picsum.photos/id/${220 + i}/200/300`,
-          cityId: 1,
-          // distance: string
-          phone: '0912345678',
-          longitude: '10.823',
-          latitude: '106.823',
-          address: 'address ' + i,
-          openAt: '2020-01-01',
-          closeAt: '2020-01-01',
-        })),
-    },
-    together: {
-      items: Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          name: 'community ' + i,
-          description: 'description ' + i,
-          id: i,
-          thumbnail: `https://picsum.photos/id/${200 + i}/200/300`,
-          total_doctor: 100 + i * 10,
-          slug: 'slug-' + i,
-        })),
-      spotlights: Array(3)
-        .fill(null)
-        .map((_, i) => ({
-          id: i,
-          community: {
-            name: 'community ' + i,
-            description: 'description ' + i,
-            id: i,
-            thumbnail: `https://picsum.photos/id/${200 + i}/200/300`,
-            total_doctor: 100 + i * 10,
-            slug: 'slug-' + i,
-          },
-          topics: [],
-          slug: 'slug-' + i,
-          author: {
-            name: 'author ' + i,
-            avatar: `https://picsum.photos/id/${220 + i}/200/300`,
-          },
-          title: 'title ' + i,
-          postTime: '2020-01-01',
-          createdAt: '2020-01-01',
-          scheduleDateTime: '2020-01-01',
-          description: 'description ' + i,
-          photos: [`https://picsum.photos/id/${230 + i}/200/300`],
-          commentsCount: 100 + i * 10,
-          likesCount: 100 + i * 10,
-          bannerImage: `https://picsum.photos/id/${240 + i}/200/300`,
-        })),
-    },
-  },
-  marryBaby: {
-    tone: 'pink',
-  },
-  onLogout: () => false,
-  isAmp: false,
-  userState: {
-    isLoggedIn: true,
-    isMobileSsr: true,
-    newBookmark: [0],
-    notifications: [],
-    openLogoutPopup: false,
-    userInfo: undefined,
-    sitewideClose: {},
-  },
-  siteType: 'helloSites',
-  locale: 'vi-VN',
-}
-
-const connectedUserState = {
-  ...defaultProps.userState,
-  isLoggedIn: true,
-  isMobileSsr: false,
-  newBookmark: [0],
-  notifications: undefined,
-  openLogoutPopup: true,
-  sitewideClose: {},
-  userInfo: {
-    name: 'Lorem Ipsum',
-    username: 'Lorem Ipsum',
-    avatar: '',
-    email: 'loremipsum@gmail.com',
-    role: 'User',
-    id: 1,
-    bookmarks: [],
-    total_bookmark: 0,
-  },
-}
-
-MobileHelloBacsi.args = {
-  ...defaultProps,
-  siteType: 'helloSites',
-  isMobile: true,
-} as Props
-
-DesktopHelloBacsi.args = {
-  ...defaultProps,
-  siteType: 'helloSites',
-  isMobile: false,
-} as Props
-DesktopHelloBacsiWithSiteWide.args = {
-  ...defaultProps,
-  siteType: 'helloSites',
-  isMobile: false,
-  sitewideBanner: (
-    <SiteWide
-      icon={CloseWhiteIcon}
-      content="banner content"
-      siteType="helloSites"
-    />
-  ),
-} as Props
-
-// DesktopHelloBacsiWithLanguage.args = {
-//   ...defaultProps,
-//   siteType: 'helloSites',
-//   isMobile: true,
-//   languageOptions: [
-//     {
-//       value: '',
-//       label: 'VI',
-//     },
-//     {
-//       value: 'test2',
-//       label: 'test2',
-//     },
-//   ],
-// } as Props
-
-DesktopHelloBacsiWithSponsor.args = {
-  ...defaultProps,
-  siteType: 'helloSites',
-  isMobile: false,
-  sponsorComponent: <StickySponsoredBy sponsoredType="article" />,
-} as Props
-
-LoggedInDesktopHelloBacsi.args = {
-  ...defaultProps,
-  siteType: 'helloSites',
-  isMobile: false,
-  userState: {
-    ...connectedUserState,
-    isMobileSsr: false,
-  },
-  sso: {
-    dispatchLogout: undefined,
-    SSO_URL: '/',
-  },
-}
-
-LoggedInMobileHelloBacsi.args = {
-  ...defaultProps,
-  siteType: 'helloSites',
-  isMobile: true,
-  userState: {
-    ...connectedUserState,
-    isMobileSsr: true,
-  },
-  sso: {
-    dispatchLogout: undefined,
-    SSO_URL: '/',
-  },
-}
-
-HelloBacsiAmp.args = {
-  ...defaultProps,
-  siteType: 'helloSites',
-  isMobile: true,
-  userState: {
-    ...connectedUserState,
-    isMobileSsr: true,
-  },
-  sso: {
-    dispatchLogout: undefined,
-    SSO_URL: '/',
-  },
-  isAmp: false,
-}

package/src/components/organisms/navigationV2/index.styled.tsx

@@ -1,30 +0,0 @@
-import { MediaQueries } from 'src/misc/utils'
-import styled from 'styled-components'
-
-export const StyledContainer = styled.div`
-  position: relative;
-  z-index: 305;
-  ${MediaQueries.mbDown} {
-    width: 100vw;
-    max-width: 100%;
-  }
-  --amp-site-wide-closed: 0px;
-  &.amp-site-wide-closed {
-    --amp-site-wide-closed: 64px;
-  }
-`
-
-export const StyledMenuLanguageLabelContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`
-export const StyledLanguageChangeLink = styled.a`
-  &[data-is-active='true'] {
-    color: unset;
-  }
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 22px;
-  text-decoration: none;
-`

package/src/components/organisms/navigationV2/index.tsx

@@ -1,320 +0,0 @@
-import React, { CSSProperties, useState } from 'react'
-
-import { Hospital } from 'care/interfaces/types'
-import {
-  Category as EcomCategory,
-  Product as EcomProduct,
-} from 'ecom/dataFormatter/lib/dataTypes'
-import { LocaleType, ProjectType } from 'interfaces/types'
-import { getDataWithCache } from 'src/cache'
-import { LanguageSwitcher } from 'src/components/molecules'
-import { Option } from 'src/components/molecules/languageSwitcher/tooltipSelection'
-import {
-  CARE_LOCALES,
-  domainLocales,
-  TOGETHER_LOCALES,
-} from 'src/interfaces/constants'
-import {
-  getDiscoverApiDomain,
-  getCareApiDomain,
-  getTogetherApiDomain,
-} from 'src/misc/routing'
-import { formatCommunity, formatPost } from 'src/together/api/dataTransform'
-import { Community, Post } from 'together/interfaces/types'
-
-import { MenuServiceList } from './components/molecules/menuServiceList'
-import { NavigationBar } from './components/molecules/navigationBar'
-import { useHeaderHeight } from './hooks/useHeaderHeight'
-import { useInsider } from './hooks/useInsider'
-import { useNavServices } from './hooks/useNavServices'
-import { StyledContainer } from './index.styled'
-import { NavigationProvider } from './navigationContext'
-import {
-  Category,
-  HealthTool,
-  MenuServiceType,
-  Specialty,
-  SpotlightSummary,
-  State,
-} from './types'
-import {
-  checkAvailableSpotlight,
-  formatCategory,
-  formatHealthTool,
-  formatSpotlightsList,
-  formatSpecialties,
-  formatDoctor,
-} from './utils'
-
-export type NavMenuContentType = {
-  categories?: {
-    items?: Category[]
-    spotlights?: SpotlightSummary[]
-  }
-  healthTools?: {
-    items?: HealthTool[]
-    spotlights?: HealthTool[]
-  }
-  care?: {
-    items?: Specialty[]
-    spotlights?: Hospital[]
-  }
-  together?: {
-    items?: Community[]
-    spotlights?: Post[]
-  }
-  ecom?: {
-    items?: EcomCategory[]
-    spotlights?: EcomProduct[]
-  }
-}
-
-export type Props = {
-  isMobile?: boolean
-  projectType?: ProjectType
-  siteType: 'marryBaby' | 'helloSites'
-  ssrMenuContent?: NavMenuContentType
-  className?: string
-  onBookingClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
-  activeMenuService?: MenuServiceType
-  onLogout?: () => void
-  marryBaby?: {
-    tone: 'pink' | 'white'
-    marryBabyApiDomain?: string
-  }
-  isAmp?: boolean
-  locale: LocaleType
-  userState: State
-  onTopBarAppears?: (b: boolean) => void
-  sitewideBanner?: JSX.Element
-  sitewideBannerShown?: boolean
-  sponsorComponent?: JSX.Element
-  languageOptions?: Option[]
-  ampSubBar?: JSX.Element
-  currentUrl?: string
-  isFirstLogin?: boolean
-  userProfileRouterPush?: (s: string) => void
-  isUserLoading?: boolean
-}
-
-const _NavigationV2 = (props: Props) => {
-  const {
-    isMobile,
-    isAmp = false,
-    locale,
-    onTopBarAppears,
-    languageOptions,
-    ampSubBar,
-    sponsorComponent,
-    sitewideBanner,
-    sitewideBannerShown,
-  } = props
-  const [sitewideBannerClosed, setSitewideBannerClosed] = useState(false)
-  const services = useNavServices()
-  useInsider()
-
-  const customAmpProps = isAmp && {
-    'next-page-hide': '',
-  }
-
-  const isShowingSiteWideBanner =
-    sitewideBannerShown && !!sitewideBanner && !sitewideBannerClosed
-  const isSponsored = !!sponsorComponent
-  const hasSponsoredBanners = !!sponsorComponent?.props?.sponsoredBy?.length
-  const isSiteWide = !!sitewideBanner && !sitewideBannerClosed
-  const { headerRef, defaultHeaderHeight, headerHeight } = useHeaderHeight({
-    isSiteWide,
-    isShowingSiteWideBanner,
-    isSponsored,
-    hasSponsoredBanners,
-    isMobile,
-    showAmpSubBar: isAmp && !!ampSubBar,
-  })
-  return (
-    <StyledContainer
-      id="navigation-v2"
-      style={
-        {
-          '--default-header-height': defaultHeaderHeight + 'px',
-          '--header-height': `calc(${headerHeight}px - var(--amp-site-wide-closed))`,
-        } as CSSProperties
-      }
-    >
-      <div
-        style={{
-          height: 'var(--header-height)',
-        }}
-      />
-      <section
-        className={isAmp ? 'amp-header' : undefined}
-        next-page-replace="hhg-navigator"
-        amp-fx="float-in-top"
-        {...customAmpProps}
-        ref={headerRef}
-      >
-        <NavigationBar
-          menuItems={services}
-          type="home"
-          onTopBarAppears={
-            isMobile
-              ? (b: boolean) => {
-                  onTopBarAppears && onTopBarAppears(b)
-                }
-              : undefined
-          }
-          languageMenu={
-            <LanguageSwitcher
-              languageOptions={languageOptions}
-              locale={locale}
-            />
-          }
-          setSitewideBannerClosed={setSitewideBannerClosed}
-          sitewideBannerClosed={sitewideBannerClosed}
-        />
-        {isMobile && isAmp && typeof ampSubBar !== 'undefined' && (
-          <>{ampSubBar}</>
-        )}
-      </section>
-      {isAmp && (
-        <amp-lightbox
-          id="discover-amp-lightbox"
-          layout="nodisplay"
-          style={{ width: '100vw', maxWidth: '100vw' }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              width: '100%',
-              height: '100%',
-            }}
-            role="button"
-            tabIndex={1}
-            {...{
-              on: 'tap:discover-amp-lightbox.close',
-            }}
-          ></div>
-          <MenuServiceList menuItems={services} />
-        </amp-lightbox>
-      )}
-    </StyledContainer>
-  )
-}
-
-const NavigationV2 = (props: Props) => {
-  const propsWithDefaultValues = {
-    siteType: 'helloSites',
-    projectType: 'discover' as ProjectType,
-    locale: 'vi-VN',
-    activeMenuService: 'categories' as MenuServiceType,
-    ssrMenuContent: {},
-    ...props,
-  }
-  return (
-    <NavigationProvider {...propsWithDefaultValues}>
-      <_NavigationV2 {...propsWithDefaultValues} />
-    </NavigationProvider>
-  )
-}
-
-export const getNavMenuContent = async (
-  locale,
-): Promise<NavMenuContentType> => {
-  const res: NavMenuContentType = {}
-  try {
-    let fetch: typeof window['fetch']
-    if (typeof window !== 'undefined') {
-      fetch = window.fetch
-    } else {
-      fetch = await require('node-fetch')
-    }
-    const customLang = locale === 'tl-PH' ? 'lang=fil' : ''
-    try {
-      const [categories, spotlights, healthtools, healthtoolsFavorites] =
-        await Promise.all([
-          fetch(
-            `${getDiscoverApiDomain(locale)}/wp-json/api/categories${
-              customLang ? '?' + customLang : ''
-            }`,
-          ).then((res) => res.json()),
-          fetch(
-            `${getDiscoverApiDomain(
-              locale,
-            )}/wp-json/api/spotlights?per_page=10${
-              customLang ? '&' + customLang : ''
-            }`,
-          ).then((res) => res.json()),
-          fetch(
-            `${getDiscoverApiDomain(locale)}/wp-json/api/healthtools${
-              customLang ? '?' + customLang : ''
-            }`,
-          ).then((res) => res.json()),
-          fetch(
-            `${getDiscoverApiDomain(locale)}/wp-json/api/healthtools/favorites${
-              customLang ? '?' + customLang : ''
-            }`,
-          ).then((res) => res.json()),
-        ])
-      res.categories = {
-        items: categories?.data?.map?.(formatCategory) || [],
-        spotlights:
-          spotlights?.data?.articles
-            ?.map?.(formatSpotlightsList)
-            ?.filter(checkAvailableSpotlight) || [],
-      }
-      res.healthTools = {
-        items: healthtools?.data?.map?.(formatHealthTool) || [],
-        spotlights: healthtoolsFavorites?.data?.map?.(formatHealthTool) || [],
-      }
-    } catch {}
-    if (TOGETHER_LOCALES.includes(locale)) {
-      try {
-        const [communities, spotlightPosts] = await Promise.all([
-          fetch(
-            getTogetherApiDomain() +
-              '/api/v1/community?website_url=https://' +
-              domainLocales[locale],
-          ).then((res) => res.json()),
-          fetch(
-            getTogetherApiDomain() +
-              `/api/v1/options?website_url=https://${domainLocales[locale]}&meta_key=popular_post`,
-          ).then((res) => res.json()),
-        ])
-        res.together = {
-          items: communities?.data?.communities?.map?.(formatCommunity) || [],
-          spotlights: spotlightPosts?.data?.posts?.map?.(formatPost) || [],
-        }
-      } catch {}
-    }
-    if (CARE_LOCALES.includes(locale)) {
-      try {
-        const [specialties, doctors] = await Promise.all([
-          fetch(
-            getCareApiDomain() +
-              `/api/specialties?_ishome=1&site=${domainLocales[locale]}`,
-          ).then((res) => res.json()),
-          fetch(
-            getCareApiDomain() +
-              `/api/search/?site=${domainLocales[locale]}&type=hospital&order_by=total_doctor`,
-          ).then((res) => res.json()),
-        ])
-        res.care = {
-          items:
-            specialties?._data?.specialties?.map?.(formatSpecialties) || [],
-          spotlights: doctors?._data.searches?.map?.(formatDoctor) || [],
-        }
-      } catch {}
-    }
-  } catch (e) {
-    console.error(e)
-  }
-  return res
-}
-
-export const getNavMenuContentWithCache = async (locale?: string) =>
-  (await getDataWithCache(
-    'nav-menu-content',
-    () => getNavMenuContent(locale || 'en-PH'),
-    (data) => !!data?.categories?.items?.length,
-  )) || {}
-
-export { NavigationV2 }