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

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

@@ -0,0 +1,214 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+import { Z_INDEX } from '../../../constants'
+import { StyledHeaderMenuItem } from '../../atoms/ItemNav/index.styled'
+
+export const StyledMenuContainer = styled.header`
+  display: flex;
+  align-items: center;
+`
+
+export const StyledMenuIcon = styled.div<{ on?: string }>`
+  margin-right: 8px;
+  &[data-event-category] > * {
+    pointer-events: none;
+  }
+  .mobile-close-icon {
+    display: none;
+  }
+  &:focus-within {
+    .mobile-close-icon {
+      display: block;
+    }
+    .mobile-hamburger-icon {
+      display: none;
+    }
+    #categories-menu {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  #categories-menu {
+    transition: transform 0.1s, opacity 0.1s;
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+`
+
+export const StyledMenuIconWrapper = styled.div`
+  cursor: pointer;
+  > * {
+    pointer-events: none;
+  }
+`
+
+export const StyledHeaderWrapper = styled.div`
+  position: fixed;
+  z-index: 201;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  align-items: center;
+
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+
+  transition: height 0.3s, transform 0.3s;
+
+  &[data-site-type='helloSites'] {
+    border-bottom: 1px solid
+      ${(props: ThemeProps) => props.theme.colors.neutral100};
+  }
+
+  &[data-marry-baby-tone='pink'] {
+    background-color: ${(props: ThemeProps) => props.theme.mbColors.lightPink};
+  }
+
+  &[data-is-amp='true'] {
+    position: relative;
+    transform: translateY(0);
+    transition: transform 0.5s;
+  }
+
+  ${MediaQueries.mbUp} {
+    &[data-sitewide-banner-shown='true'][data-collapsed='true'] {
+      transform: translateY(-64px);
+    }
+  }
+  ${MediaQueries.mbDown} {
+    &[data-site-type='marryBaby'] {
+      border-bottom: none;
+    }
+
+    &[data-fixed-bar='true'] {
+      position: fixed;
+      transform: translateY(0);
+    }
+
+    &[data-fixed-bar='false'] {
+      position: absolute;
+    }
+
+    &[data-collapsed='true'] {
+      transform: translateY(-100%);
+      transition: transform 0.5s;
+    }
+    &[data-collapsed='false'] {
+      transform: translateY(0);
+      transition: transform 0.5s;
+    }
+
+    .top-bar-header {
+      line-height: normal;
+    }
+
+    &[data-header-type='home'] {
+      position: fixed;
+      z-index: ${Z_INDEX.headerContainerHome};
+    }
+
+    &[data-header-type='popup'] {
+      position: absolute;
+      z-index: ${Z_INDEX.headerContainerPopup};
+    }
+
+    &[data-header-type='popup-sub-level'] {
+      position: absolute;
+      z-index: ${Z_INDEX.headerContainerPopupSUbLevel};
+    }
+
+    &[data-is-displayed='false'] {
+      //display: none;
+      visibility: hidden;
+    }
+
+    &[data-is-amp='true'] {
+      position: relative;
+      transform: translateY(0);
+      transition: transform 0.5s;
+    }
+  }
+`
+
+export const StyledHeader = styled.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+
+  justify-content: space-between;
+  padding: 0 2rem;
+  height: 69px;
+  ${MediaQueries.pcDown} {
+    padding: 0 1rem;
+  }
+
+  ${MediaQueries.mbDown} {
+    position: relative;
+    height: 64px;
+    background: white;
+    gap: 1rem;
+  }
+`
+
+export const StyledLeftGroup = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: 24px;
+  ${MediaQueries.pcDown} {
+    gap: 16px;
+  }
+`
+
+export const StyledLogoWrapper = styled.div``
+
+export const StyledRightGroup = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex-shrink: 0.6;
+  ${StyledHeaderMenuItem} {
+    gap: 2px;
+    ${MediaQueries.pcUp} {
+      padding: 0 12px;
+    }
+    ${MediaQueries.pcDown} {
+      padding: 0 6px;
+    }
+    ${MediaQueries.mbDown} {
+      display: none;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+`
+
+export const StyledServiceListMenuSearchInputWrapper = styled.div`
+  .fake-search-input {
+    pointer-events: none;
+    input {
+      line-height: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+`
+
+export const StyledProfileNavGroup = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-shrink: 0;
+  ${MediaQueries.pcDown} {
+    margin-left: 8px;
+    gap: 8px;
+  }
+  ${MediaQueries.mbDown} {
+    margin-left: 12px;
+    gap: 10px;
+  }
+`

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

@@ -0,0 +1,283 @@
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useContext,
+} from 'react'
+
+import { SehatBadge } from 'assets/svg'
+import { Logo, TypeProps as LogoTypeProps } from 'components/atoms/logo'
+import { LOCALE_SPECS } from 'components/organisms/navigationLayout/constants'
+import { MenuItemType } from 'components/organisms/navigationV2/types'
+import { useTranslations } from 'hooks/useTranslations'
+import { throttle } from 'lodash'
+import { DisplayWrapper } from 'src/components/atoms/displayWrapper'
+import { lazyLoadInstance } from 'src/misc/lazyLoad'
+
+import { NavigationBookingButton } from '../../../../navigationBookingButton'
+import { NavigationContext } from '../../../navigationContext'
+import { ItemMenu } from '../../atoms/ItemNav'
+import { SearchInput } from '../../atoms/searchInput'
+import { MenuCareList } from '../menuCareList'
+import { MenuCategoriesList } from '../menuCategoriesList'
+import { MenuCommunitiesList } from '../menuCommunitiesList'
+import { MenuHealthToolsList } from '../menuHealthToolsList'
+import { HamburgerMenu } from './hamburgerMenu'
+import {
+  StyledHeader,
+  StyledHeaderWrapper,
+  StyledLeftGroup,
+  StyledLogoWrapper,
+  StyledProfileNavGroup,
+  StyledRightGroup,
+} from './index.styled'
+import { NavigationProfileButtonWithContext } from './navigationProfileButtonWithContext'
+
+export type TypeProps = 'popup' | 'popup-sub-level' | 'home'
+
+export interface Props {
+  onTopBarAppears: (b: boolean) => void
+  type: TypeProps
+  languageMenu?: JSX.Element
+  menuItems: MenuItemType[]
+  sitewideBannerClosed?: boolean
+  setSitewideBannerClosed?: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const NavigationBar = ({
+  onTopBarAppears,
+  type = 'home',
+  languageMenu,
+  menuItems,
+  setSitewideBannerClosed,
+  sitewideBannerClosed,
+}: Props) => {
+  const {
+    siteType,
+    isAmp,
+    isMobile = false,
+    locale,
+    sitewideBanner,
+    sitewideBannerShown = true,
+    sponsorComponent,
+    onBookingClick,
+    currentUrl,
+    ssrMenuContent: { categories, healthTools, care, together },
+    configs: { statics, enableNavCareBooking, enableSearchBar },
+  } = useContext(NavigationContext)
+  const { t } = useTranslations()
+  const { SSO_URL, HOME_PAGE_URL } = statics
+  const isSponsored = !!sponsorComponent
+
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const scrollY = useRef(47)
+  const collapsedMenu = useRef<boolean>(false)
+
+  const goToLogin = () => {
+    const currentLocation = window.location.href
+    window.location.href = SSO_URL
+      ? `${SSO_URL}?returnUrl=${currentLocation}`
+      : currentLocation
+  }
+
+  const logoType =
+    siteType === 'helloSites'
+      ? (LOCALE_SPECS[locale]?.LOGO_TYPE as LogoTypeProps)
+      : siteType
+  const isBrowser = typeof window !== 'undefined'
+
+  const scrolling = useCallback(
+    throttle(() => {
+      if (type === 'home') {
+        if (isBrowser) {
+          if (
+            window.scrollY > scrollY.current &&
+            window.scrollY > 64 &&
+            !collapsedMenu.current
+          ) {
+            collapsedMenu.current = true
+            setIsCollapsed(true)
+          }
+
+          if (window.scrollY < scrollY.current && collapsedMenu.current) {
+            collapsedMenu.current = false
+            setIsCollapsed(false)
+          }
+
+          if (window.scrollY >= 0) scrollY.current = window.scrollY
+        }
+      }
+    }, 200),
+    [],
+  )
+
+  useEffect(() => {
+    onTopBarAppears?.(!isCollapsed)
+  }, [isCollapsed])
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrolling, { passive: true })
+    return () => {
+      window.removeEventListener('scroll', scrolling)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isMobile) scrolling()
+  }, [isMobile])
+
+  useEffect(() => {
+    lazyLoadInstance?.update(document.querySelectorAll('#site-header img'))
+  }, [
+    categories?.items?.length,
+    healthTools?.items?.length,
+    care?.items?.length,
+    together?.items?.length,
+  ])
+
+  const isShowingSiteWideBanner =
+    sitewideBannerShown && !!sitewideBanner && !sitewideBannerClosed
+
+  return (
+    <StyledHeaderWrapper
+      data-site-type={siteType}
+      data-sponsored={isSponsored}
+      data-sitewide-banner-shown={isShowingSiteWideBanner}
+      // merge Mobile props
+      data-header-type={type}
+      data-collapsed={isCollapsed}
+      data-with-search-input={type !== 'popup-sub-level'}
+      data-is-displayed={true}
+      data-is-amp={isAmp}
+      id="site-header"
+    >
+      {sitewideBanner
+        ? !React.isValidElement(sitewideBanner)
+          ? sitewideBanner
+          : React.cloneElement<{
+              isCollapsed?: boolean
+              isAmp?: boolean
+              isMobile?: boolean
+              setBannerClosed?: (v: boolean) => void
+            }>(sitewideBanner, {
+              isCollapsed,
+              setBannerClosed: setSitewideBannerClosed,
+              isAmp,
+              isMobile,
+            })
+        : null}
+      <StyledHeader>
+        <StyledLeftGroup>
+          <HamburgerMenu menuItems={menuItems} type={type} />
+          <a href={HOME_PAGE_URL}>
+            <StyledLogoWrapper>
+              <Logo
+                style={{
+                  display: 'flex',
+                }}
+                type={logoType}
+                height="27px"
+                width="121px"
+                badge={
+                  locale === 'id-ID' &&
+                  (isAmp ? (
+                    <amp-img src={SehatBadge} width="56" height="23" />
+                  ) : (
+                    <img src={SehatBadge} width="56" height="23" />
+                  ))
+                }
+              />
+            </StyledLogoWrapper>
+          </a>
+          {enableSearchBar && !isAmp && (
+            <DisplayWrapper mediaQueryKey="mbUp">
+              <SearchInput />
+            </DisplayWrapper>
+          )}
+        </StyledLeftGroup>
+        <StyledRightGroup>
+          {!isAmp && (
+            <DisplayWrapper
+              mediaQueryKey="mbUp"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                height: '100%',
+              }}
+            >
+              {menuItems?.map((menuItem, index) => (
+                <ItemMenu
+                  key={index}
+                  item={menuItem}
+                  menu={
+                    menuItem.popupType === 'categories' ? (
+                      <MenuCategoriesList
+                        categories={categories?.items}
+                        spotlightsList={categories?.spotlights}
+                        siteType={siteType}
+                      />
+                    ) : menuItem.popupType === 'tools' ? (
+                      <MenuHealthToolsList
+                        locale={locale}
+                        healthTools={healthTools?.items}
+                        spotlightHealthTools={healthTools?.spotlights}
+                        siteType={siteType}
+                      />
+                    ) : menuItem.popupType === 'together' ? (
+                      <MenuCommunitiesList
+                        communities={together?.items}
+                        spotlights={together?.spotlights}
+                        siteType={siteType}
+                      />
+                    ) : menuItem.popupType === 'care' ? (
+                      <MenuCareList
+                        careSpecialties={care?.items}
+                        siteType={siteType}
+                        spotlights={care?.spotlights}
+                      />
+                    ) : null
+                  }
+                />
+              ))}
+            </DisplayWrapper>
+          )}
+          <StyledProfileNavGroup>
+            {enableNavCareBooking && !isAmp && (
+              <DisplayWrapper
+                mediaQueryKey="mbUp"
+                forceDisplay={isAmp ? false : undefined}
+              >
+                <NavigationBookingButton
+                  careUrlFe={statics.CARE_URL_FE}
+                  currentUrl={currentUrl}
+                  btnName={t('login.booking')}
+                  onCareHeaderClick={onBookingClick}
+                />
+              </DisplayWrapper>
+            )}
+            {languageMenu}
+            <NavigationProfileButtonWithContext goToLogin={goToLogin} />
+          </StyledProfileNavGroup>
+        </StyledRightGroup>
+      </StyledHeader>
+      {sponsorComponent
+        ? !React.isValidElement(sponsorComponent)
+          ? sponsorComponent
+          : React.cloneElement<{
+              isCollapsed?: boolean
+              isMobile?: boolean
+              isAmp?: boolean
+              locale?: string
+            }>(sponsorComponent, {
+              isCollapsed,
+              locale,
+              isMobile,
+              isAmp,
+            })
+        : null}
+    </StyledHeaderWrapper>
+  )
+}
+
+export { NavigationBar }

package/src/components/organisms/navigationV2/components/molecules/navigationBar/navigationProfileButtonWithContext.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react'
+
+import { NavigationProfileButton } from 'src/components/organisms/navigationProfileButton'
+import { UP_BASEPATH } from 'src/interfaces/constants'
+
+import { NavigationContext } from '../../../navigationContext'
+
+export function NavigationProfileButtonWithContext({
+  goToLogin,
+}: {
+  goToLogin: () => void
+}) {
+  const {
+    siteType,
+    isAmp,
+    userState: { userInfo },
+    currentUrl,
+    onLogout,
+    userProfileRouterPush,
+    configs: {
+      enableNavCare,
+      enableProfileMyHealth,
+      enableNavTogether,
+      enableProfileEcom,
+      statics,
+      enableProfileNavigatorMenu,
+    },
+    isUserLoading,
+  } = useContext(NavigationContext)
+  return (
+    <NavigationProfileButton
+      userInfo={userInfo}
+      siteType={siteType}
+      isAmp={isAmp}
+      goToLogin={goToLogin}
+      SSO_URL={statics.SSO_URL + '/'}
+      currentUrl={currentUrl}
+      onLogout={onLogout}
+      UP_BASEPATH={UP_BASEPATH}
+      isMyHealthEnabled={enableProfileMyHealth}
+      enableCare={enableNavCare}
+      enableTogether={enableNavTogether}
+      enableEcom={enableProfileEcom}
+      togetherApiDomain={statics.TOGETHER_API + '/'}
+      isUserProfileNavigatorMenuHidden={!enableProfileNavigatorMenu}
+      userProfileRouterPush={userProfileRouterPush}
+      isLoading={isUserLoading}
+    />
+  )
+}

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

@@ -0,0 +1,70 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledContainerNoPosts = styled.div`
+  padding: 16px;
+  border-radius: 8px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  a {
+    text-decoration: none;
+  }
+
+  .bg-svg {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  ${MediaQueries.mbDown} {
+    display: block;
+    .bg-svg {
+      right: -24px;
+      left: unset;
+      top: 0;
+      transform: rotateY(180deg);
+    }
+  }
+
+  ${MediaQueries.mbUp} {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 3fr;
+  }
+`
+export const StyledDescription = styled.div`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${(props: ThemeProps) => props.theme.colors.gray600};
+  margin-bottom: 15px;
+`
+
+export const StyledTitle = styled.div`
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 26px;
+  color: #000000;
+  margin-bottom: 4px;
+`
+export const StyledContentLeft = styled.div`
+  background: #fff;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+`
+export const StyledLeft = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  ${MediaQueries.mbDown} {
+    justify-content: end;
+    min-height: 100px;
+  }
+`