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

package/raw/src/components/organisms/navigationLayout/menuHealthToolsList/helloSites.tsx

@@ -0,0 +1,364 @@
+import React from 'react'
+
+import { Container } from 'components/atoms/container'
+import { Heading } from 'components/atoms/heading'
+import { LocaleType } from 'interfaces/types'
+import { theme } from 'misc/theme'
+
+import { domainLocales } from '../constants'
+import {
+  DesktopMenuPopup,
+  HealthTool,
+  HealthToolByCategory,
+  SiteType,
+} from '../types'
+import { useTranslation } from '../utils'
+import CategorySkeleton from './categorySkeleton'
+import {
+  StyledCategory,
+  // StyledCategoryIcon,
+  StyledCategoryContainer,
+  StyledCategoryIcon,
+  StyledCategoryItemAll,
+  StyledCloseWrapper,
+  StyledContainer,
+  StyledHealthToolItem,
+  StyledImageWrapper,
+  StyledInnerMenuPopupContainer,
+  StyledMenuPopupContainer,
+  StyledMenuPopupWrapper,
+  StyledSeeMore,
+  StyleHealthToolByCategory,
+} from './index.styled'
+
+export type Props = {
+  isDisplayed: boolean
+  healthTools?: HealthTool[]
+  healthToolsByCategory?: HealthToolByCategory[]
+  STATIC_PAGES: {
+    [key in LocaleType]: {
+      [key: string]: string | null
+    }
+  }
+  onSelectHealthTool: (c: HealthTool) => void
+  onClosePopup?: () => void
+  isLoading: boolean
+  isMobile: boolean
+  desktopPopupType: DesktopMenuPopup
+  basePath: string
+  locale: LocaleType
+  discoverApiDomain: string
+  HEALTH_TOOL_URL_FE: string
+  // callApiHandler: (p: string, m: 'GET' | 'POST') => any
+  siteType: SiteType
+}
+
+const HealthToolsList = ({
+  healthTools,
+  onSelectHealthTool,
+  basePath,
+  isDesktop,
+  onClosePopup,
+  HEALTH_TOOL_URL_FE,
+  locale,
+  isGrouped,
+}: {
+  healthTools?: HealthTool[]
+  onSelectHealthTool: (c: HealthTool) => void
+  basePath: string
+  isDesktop?: boolean
+  onClosePopup?: () => void
+  HEALTH_TOOL_URL_FE: string
+  locale: LocaleType
+  isGrouped?: boolean
+}) => {
+  if (!healthTools?.length) return null
+  return isDesktop ? (
+    <>
+      {healthTools.map((healthTool, index) => (
+        <StyledHealthToolItem
+          data-grouped={isGrouped}
+          key={healthTool.title}
+          onClick={onClosePopup}
+        >
+          <a
+            data-event-category="Hamburger Navigation"
+            data-event-action="Click"
+            data-event-label={`https://${domainLocales[locale]}${healthTool.link}`}
+            style={{
+              textDecoration: 'none',
+              color: theme.colors.gray800,
+            }}
+            className="iconMenu"
+            href={
+              healthTool.link.startsWith('http')
+                ? healthTool.link
+                : `${HEALTH_TOOL_URL_FE}${healthTool.link}`
+            }
+          >
+            <div
+              style={{
+                display: 'flex',
+              }}
+            >
+              <img
+                alt="health-tool-icon"
+                src={healthTool.icon || '/images/avatar.jpg'}
+                style={{ width: '32px', height: '32px' }}
+              />
+            </div>
+            <p>{healthTool.title}</p>
+          </a>
+        </StyledHealthToolItem>
+      ))}
+    </>
+  ) : (
+    <>
+      {healthTools.map((healthTool, index) => (
+        <a key={'tool-' + index}>
+          <StyledCategoryContainer
+            onClick={() => {
+              onSelectHealthTool(healthTool)
+            }}
+            data-event-category="Hamburger Navigation"
+            data-event-action="Click"
+            data-event-label={`https://${domainLocales[locale]}${healthTool.link}`}
+          >
+            <StyledCategoryIcon>
+              <img
+                alt="health-tool-icon"
+                src={healthTool.icon || `${basePath}/images/avatar.jpg`}
+                style={{ width: '32px', height: '32px' }}
+              />
+            </StyledCategoryIcon>
+            <StyledCategory>{healthTool.title}</StyledCategory>
+          </StyledCategoryContainer>
+        </a>
+      ))}
+    </>
+  )
+}
+
+const HelloSitesMenuHealthToolsList = ({
+  isDisplayed,
+  healthTools,
+  healthToolsByCategory,
+  onSelectHealthTool,
+  isLoading,
+  basePath,
+  locale,
+  isMobile,
+  onClosePopup,
+  desktopPopupType,
+  HEALTH_TOOL_URL_FE,
+  STATIC_PAGES,
+  siteType,
+}: Props) => {
+  const f = useTranslation()
+
+  return isMobile ? (
+    <>
+      {isLoading && isDisplayed ? (
+        <StyledContainer>
+          <CategorySkeleton />
+        </StyledContainer>
+      ) : (
+        <StyledContainer
+          data-category-list-type="main"
+          data-is-displayed={isDisplayed}
+        >
+          {!!healthToolsByCategory?.length ? (
+            healthToolsByCategory.map(
+              (categoryHealthTool, index) =>
+                !!categoryHealthTool.healthTools?.length && (
+                  <React.Fragment key={`category-health-tool-${index}`}>
+                    <Heading tag="h4" fontWeight="bold" className="title">
+                      <span
+                        dangerouslySetInnerHTML={{
+                          __html: categoryHealthTool.name,
+                        }}
+                      />
+                    </Heading>
+                    <HealthToolsList
+                      healthTools={categoryHealthTool.healthTools.slice(0, 4)}
+                      onSelectHealthTool={onSelectHealthTool}
+                      basePath={basePath}
+                      HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+                      locale={locale}
+                    />
+                  </React.Fragment>
+                ),
+            )
+          ) : (
+            <HealthToolsList
+              healthTools={healthTools}
+              onSelectHealthTool={onSelectHealthTool}
+              basePath={basePath}
+              HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+              locale={locale}
+            />
+          )}
+          <StyledSeeMore>
+            <a
+              href={`${HEALTH_TOOL_URL_FE}${
+                STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
+              }`}
+              style={{ textDecoration: 'none' }}
+            >
+              <StyledCategoryItemAll
+                key={'all-health-tools-mobile'}
+                data-event-category="Hamburger Navigation"
+                data-event-action="Click"
+                data-event-label={`${HEALTH_TOOL_URL_FE}${
+                  STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
+                }`}
+              >
+                {f('home.navigator.menuItem.allHealthTools')}
+                <StyledImageWrapper>
+                  <img
+                    src={`${basePath}/svg/chevronRightActive.svg`}
+                    style={{ width: '16px', height: '16px' }}
+                    alt={f('home.navigator.menuItem.allHealthTools')}
+                  />
+                </StyledImageWrapper>
+              </StyledCategoryItemAll>
+            </a>
+          </StyledSeeMore>
+        </StyledContainer>
+      )}
+    </>
+  ) : (
+    <StyledMenuPopupWrapper
+      className="top-menu-health-tools"
+      onClick={onClosePopup}
+      data-is-display={desktopPopupType === 'tools'}
+      // key={nextId()}
+    >
+      <StyledMenuPopupContainer>
+        <Container style={{ padding: '0 16px' }}>
+          <StyledInnerMenuPopupContainer
+            data-popup-type={desktopPopupType}
+            onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              e.stopPropagation()
+            }}
+          >
+            {
+              <>
+                {!!healthToolsByCategory?.length ? (
+                  healthToolsByCategory.map(
+                    (categoryHealthTool, index) =>
+                      !!categoryHealthTool.healthTools?.length && (
+                        <StyleHealthToolByCategory
+                          key={`health-tools-categories-${index}`}
+                        >
+                          <Heading tag="h4" as="h1" fontWeight="bold">
+                            <span
+                              dangerouslySetInnerHTML={{
+                                __html: categoryHealthTool.name,
+                              }}
+                            />
+                          </Heading>
+                          <HealthToolsList
+                            healthTools={categoryHealthTool.healthTools.slice(
+                              0,
+                              4,
+                            )}
+                            onSelectHealthTool={onSelectHealthTool}
+                            basePath={basePath}
+                            HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+                            locale={locale}
+                            isDesktop
+                            isGrouped
+                            onClosePopup={onClosePopup}
+                          />
+                        </StyleHealthToolByCategory>
+                      ),
+                  )
+                ) : (
+                  <HealthToolsList
+                    healthTools={healthTools}
+                    onSelectHealthTool={onSelectHealthTool}
+                    basePath={basePath}
+                    HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+                    locale={locale}
+                    isDesktop
+                    onClosePopup={onClosePopup}
+                  />
+                )}
+
+                <a
+                  style={{ textDecoration: 'none' }}
+                  href={`${HEALTH_TOOL_URL_FE}${
+                    STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
+                  }`}
+                >
+                  <StyledCategoryItemAll
+                    onClick={onClosePopup}
+                    key={'all-health-tools'}
+                    data-theme={siteType}
+                    data-event-category="Hamburger Navigation"
+                    data-event-action="Click"
+                    data-event-label={`${HEALTH_TOOL_URL_FE}${
+                      STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
+                    }`}
+                  >
+                    {f('home.navigator.menuItem.allHealthTools')}
+                    <StyledImageWrapper>
+                      {/* {siteType === 'helloSites' ? ( */}
+                      <img
+                        src={`${basePath}/svg/chevronRightActive.svg`}
+                        style={{ width: '16px', height: '16px' }}
+                        alt={f('home.navigator.menuItem.allHealthTools')}
+                      />
+                      {/* // ) : (
+                      //   <svg
+                      //     width="24"
+                      //     height="24"
+                      //     viewBox="0 0 24 24"
+                      //     fill="none"
+                      //     xmlns="http://www.w3.org/2000/svg"
+                      //   >
+                      //     <path
+                      //       d="M6.5 12H17.5M17.5 12L12.9118 8M17.5 12L12.9118 16"
+                      //       stroke="#3E3F58"
+                      //       strokeWidth="1.3"
+                      //       strokeLinecap="round"
+                      //       strokeLinejoin="round"
+                      //     />
+                      //   </svg>
+                      // )} */}
+                    </StyledImageWrapper>
+                  </StyledCategoryItemAll>
+                </a>
+              </>
+            }
+            {/* )} */}
+            <StyledCloseWrapper onClick={onClosePopup}>
+              {/* <img
+                    src={`${basePath}/svg/close.svg`}
+                    style={{ width: '24px', height: '24px' }}
+                    alt={'close'}
+                  /> */}
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M18 6L6 18M18 18L6 6"
+                  stroke="#3E3F58"
+                  strokeWidth="1.3"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </StyledCloseWrapper>
+          </StyledInnerMenuPopupContainer>
+        </Container>
+      </StyledMenuPopupContainer>
+    </StyledMenuPopupWrapper>
+  )
+}
+
+export { HelloSitesMenuHealthToolsList }

package/raw/src/components/organisms/navigationLayout/menuHealthToolsList/index.styled.tsx

@@ -0,0 +1,176 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+import { Z_INDEX } from '../constants'
+
+export const StyledCardSkeleton = styled.div`
+  & > div {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+`
+export const StyledContainer = styled.div`
+  &[data-category-list-type='sub'] {
+    padding-bottom: 72px;
+  }
+
+  &[data-is-displayed='false'] {
+    display: none;
+  }
+  .title {
+    margin-bottom: 8px;
+    margin-top: 24px;
+  }
+`
+export const StyledCategoryContainer = styled.div`
+  display: flex;
+  width: 100%;
+  height: 64px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+  border-bottom: 1px solid
+    ${(props: ThemeProps) => props.theme.colors.neutral100};
+
+  &[data-is-heading-category='true'] {
+    /* border-bottom: none; */
+    background-color: ${(props: ThemeProps) => props.theme.colors.blue50};
+    color: ${(props: ThemeProps) => props.theme.colors.gray800};
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+  }
+  > * {
+    pointer-events: none;
+  }
+`
+
+export const StyledCategory = styled.div``
+
+export const StyledCategoryIcon = styled.div`
+  padding-right: 16px;
+`
+
+export const StyledMenuPopupWrapper = styled.div`
+  position: fixed;
+  z-index: ${Z_INDEX.menuCategoryPopupWrapper};
+  top: 69px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  background-color: transparent;
+  &[data-is-display='false'] {
+    display: none;
+  }
+`
+
+export const StyledMenuPopupContainer = styled.div`
+  z-index: ${Z_INDEX.menuCategoryPopupContainer};
+  align-items: center;
+
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral50};
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04),
+    0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
+    0px 0px 1px rgba(0, 0, 0, 0.04);
+`
+
+export const StyledInnerMenuPopupContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 48px 0;
+`
+
+export const StyledHealthToolItem = styled.div`
+  width: 33%;
+  height: 48px;
+  padding-right: 16px;
+  margin-bottom: 12px;
+
+  &[data-grouped='true'] {
+    width: 100%;
+  }
+
+  & > a {
+    display: flex;
+    align-items: center;
+    color: ${(props: ThemeProps) => props.theme.colors.gray800};
+    font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+    line-height: 22px;
+
+    & > :first-child {
+      margin-right: 16px;
+    }
+  }
+
+  & > a > p:hover {
+    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  }
+  [data-event-category] > * {
+    pointer-events: none;
+  }
+`
+
+export const StyledCategoryItemAll = styled.div`
+  display: flex;
+  align-items: center;
+
+  padding-right: 16px;
+  margin-bottom: 12px;
+  color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+  line-height: 24px;
+
+  &[data-theme='marryBaby'] {
+    color: ${(props: ThemeProps) => props.theme.mbColors.pink};
+  }
+  &[data-event-category] * {
+    pointer-events: none;
+  }
+`
+
+export const StyledImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  margin-left: 10px;
+`
+
+export const StyledCloseWrapper = styled.div`
+  position: absolute;
+  top: 16px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`
+
+export const StyledHealtoolListContainer = styled.div`
+  &[data-is-displayed='false'] {
+    display: none;
+  }
+`
+
+export const StyledSeeMore = styled.div`
+  margin-bottom: 56px;
+  margin-top: 18px;
+`
+
+export const StyleHealthToolByCategory = styled.div`
+  position: relative;
+  display: flex;
+  width: 25%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-bottom: 24px;
+  h1 {
+    margin-bottom: 20px;
+  }
+`

package/raw/src/components/organisms/navigationLayout/menuHealthToolsList/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+import { LocaleType } from 'interfaces/types'
+
+import {
+  DesktopMenuPopup,
+  HealthTool,
+  HealthToolByCategory,
+  SiteType,
+} from '../types'
+import { HelloSitesMenuHealthToolsList } from './helloSites'
+import { MarryBabyMenuHealthToolsList } from './marryBaby'
+
+export type Props = {
+  isDisplayed: boolean
+  healthTools?: HealthTool[]
+  healthToolsByCategory?: HealthToolByCategory[]
+  onSelectHealthTool: (c: HealthTool) => void
+  onClosePopup: () => void
+  isLoading: boolean
+  isMobile: boolean
+  desktopPopupType: DesktopMenuPopup
+  basePath: string
+  locale: LocaleType
+  discoverApiDomain: string
+  HEALTH_TOOL_URL_FE: string
+  siteType: SiteType
+  STATIC_PAGES: { [key in LocaleType]: any }
+}
+
+const MenuHealthToolsList = ({
+  isDisplayed = false,
+  healthTools,
+  healthToolsByCategory,
+  onSelectHealthTool,
+  isLoading,
+  basePath,
+  locale,
+  isMobile,
+  onClosePopup,
+  desktopPopupType,
+  HEALTH_TOOL_URL_FE,
+  siteType,
+  discoverApiDomain,
+  STATIC_PAGES,
+}: Props) => {
+  return siteType === 'helloSites' ? (
+    <HelloSitesMenuHealthToolsList
+      isDisplayed={isDisplayed}
+      locale={locale}
+      basePath={basePath}
+      discoverApiDomain={discoverApiDomain}
+      HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+      onSelectHealthTool={onSelectHealthTool}
+      healthTools={healthTools}
+      healthToolsByCategory={healthToolsByCategory}
+      isLoading={isLoading}
+      isMobile={isMobile}
+      siteType={siteType}
+      desktopPopupType={desktopPopupType}
+      onClosePopup={onClosePopup}
+      STATIC_PAGES={STATIC_PAGES}
+    />
+  ) : (
+    <MarryBabyMenuHealthToolsList
+      isDisplayed={isDisplayed}
+      basePath={basePath}
+      discoverApiDomain={discoverApiDomain}
+      HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
+      onSelectHealthTool={onSelectHealthTool}
+      healthTools={
+        healthTools ||
+        healthToolsByCategory.reduce((r, h) => r.concat(h.healthTools), [])
+      }
+      isLoading={isLoading}
+      isMobile={isMobile}
+      desktopPopupType={desktopPopupType}
+      onClosePopup={onClosePopup}
+    />
+  )
+}
+
+export { MenuHealthToolsList }