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

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

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

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

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

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