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

package/src/components/organisms/navigationLayout/menuHealthToolsList/marryBaby.tsx

@@ -0,0 +1,166 @@
+import React, { CSSProperties } from 'react'
+
+import { theme } from 'misc/theme'
+
+import { MarryBabyText } from '../marryBabyText'
+import { DesktopMenuPopup, HealthTool } from '../types'
+import CategorySkeleton from './categorySkeleton'
+import {
+  StyledCategory,
+  // StyledCategoryIcon,
+  // StyledCategoryContainer,
+  // StyledCategoryIcon,
+  // StyledCategoryItemAll,
+  // StyledCloseWrapper,
+  StyledContainer,
+  // StyledHealthToolItem,
+  // StyledImageWrapper,
+  // StyledInnerMenuPopupContainer,
+  // StyledMenuPopupContainer,
+  // StyledMenuPopupWrapper,
+} from './index.styled'
+import {
+  StyledFullScreenLayer,
+  StyledMarryBabyCategoryContainer,
+  StyledMarryBabyHealthCategoriesContainer,
+  StyledMarryBabyIconContainer,
+  StyledMarryBabyMenuPopupContainer,
+  StyledMarryBabyMenuPopupWrapper,
+} from './marrybaby.styled'
+
+export type Props = {
+  isDisplayed: boolean
+  healthTools: HealthTool[]
+  onSelectHealthTool: (c: HealthTool) => void
+  onClosePopup: () => void
+  isLoading: boolean
+  isMobile: boolean
+  desktopPopupType: DesktopMenuPopup
+  basePath: string
+  discoverApiDomain: string
+  HEALTH_TOOL_URL_FE: string
+}
+
+const MarryBabyMenuHealthToolsList = ({
+  isDisplayed = false,
+  healthTools,
+  onSelectHealthTool,
+  isLoading,
+  basePath,
+  isMobile,
+  onClosePopup,
+  HEALTH_TOOL_URL_FE,
+  desktopPopupType,
+}: Props) => {
+  return isMobile ? (
+    isLoading && isDisplayed ? (
+      <StyledContainer>
+        <CategorySkeleton />
+      </StyledContainer>
+    ) : (
+      <StyledContainer
+        style={{
+          marginTop: 24,
+        }}
+        data-category-list-type="main"
+        data-is-displayed={isDisplayed}
+      >
+        {healthTools.map((healthTool, index) => (
+          <a
+            key={'tool-' + index}
+            className={`wrapper-menu-health-tool wrapper-menu-health-tool-${index}`}
+            data-event-category="Hamburger Navigation"
+            data-event-action="Click"
+            data-event-label={`https://https://marrybaby.vn${healthTool.link}`}
+          >
+            <StyledMarryBabyCategoryContainer
+              onClick={() => {
+                onSelectHealthTool(healthTool)
+              }}
+            >
+              <StyledMarryBabyIconContainer>
+                <img
+                  alt="health-tool-icon"
+                  src={healthTool.icon || `${basePath}/images/avatar.jpg`}
+                  style={{ width: '24px', height: '24px' }}
+                />
+              </StyledMarryBabyIconContainer>
+              <StyledCategory>{healthTool.title}</StyledCategory>
+            </StyledMarryBabyCategoryContainer>
+          </a>
+        ))}
+      </StyledContainer>
+    )
+  ) : (
+    <StyledMarryBabyMenuPopupWrapper
+      className="top-menu-health-tools"
+      onClick={onClosePopup}
+      data-is-display={desktopPopupType === 'tools'}
+    >
+      <StyledFullScreenLayer />
+      <StyledMarryBabyMenuPopupContainer
+        data-popup-type={desktopPopupType}
+        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+          e.stopPropagation()
+        }}
+      >
+        <StyledMarryBabyHealthCategoriesContainer>
+          {isLoading ? (
+            <div
+              style={{
+                width: '100%',
+                padding: '0 20px',
+              }}
+            >
+              <CategorySkeleton />
+            </div>
+          ) : (
+            healthTools.map((healthTool: HealthTool, index: number) => (
+              <a
+                className={`wrapper-menu-health-tool wrapper-menu-health-tool-${index} iconMenu`}
+                data-event-category="Hamburger Navigation"
+                data-event-action="Click"
+                data-event-label={`https://marrybaby.vn${healthTool.link}`}
+                style={{
+                  textDecoration: 'none',
+                  color: theme.colors.gray800,
+                }}
+                href={
+                  healthTool.link.startsWith('http')
+                    ? healthTool.link
+                    : `${HEALTH_TOOL_URL_FE}${healthTool.link}`
+                }
+                key={healthTool.title}
+                onClick={(e) => {
+                  e.stopPropagation()
+                }}
+              >
+                <StyledMarryBabyCategoryContainer onClick={onClosePopup}>
+                  <StyledMarryBabyIconContainer>
+                    <img
+                      alt={healthTool.title}
+                      src={healthTool.icon || '/images/avatar.jpg'}
+                      style={{ width: '24px', height: '24px' }}
+                    />
+                  </StyledMarryBabyIconContainer>
+                  <MarryBabyText
+                    style={
+                      {
+                        fontWeight: theme.sizes.fwSemiBold,
+                      } as CSSProperties
+                    }
+                    type="subtitle-2"
+                  >
+                    {healthTool.title}
+                  </MarryBabyText>
+                </StyledMarryBabyCategoryContainer>
+              </a>
+            ))
+          )}
+        </StyledMarryBabyHealthCategoriesContainer>
+      </StyledMarryBabyMenuPopupContainer>
+    </StyledMarryBabyMenuPopupWrapper>
+  )
+}
+
+export { MarryBabyMenuHealthToolsList }

package/src/components/organisms/navigationLayout/menuHealthToolsList/marrybaby.styled.tsx

@@ -0,0 +1,118 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+import { Z_INDEX } from '../constants'
+
+// import { Z_INDEX } from '../constants'
+
+export const StyledMarryBabyIconContainer = styled.div`
+  display: flex;
+  width: 48px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+
+  margin-right: 16px;
+
+  background-color: ${(props: ThemeProps) => props.theme.mbColors.lightGray};
+  border-radius: 50%;
+`
+
+export const StyledMarryBabyCategoryContainer = styled.div`
+  display: flex;
+  width: 100%;
+  height: 64px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px 16px;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+`
+
+// desktop
+export const StyledMarryBabyMenuPopupWrapper = styled.div`
+  position: absolute;
+  z-index: ${Z_INDEX.menuCategoryPopupWrapper};
+  top: 64px;
+
+  min-width: 375px;
+  align-items: center;
+  background-color: transparent;
+  &[data-is-display='false'] {
+    display: none;
+  }
+`
+export const StyledFullScreenLayer = styled.div`
+  position: fixed;
+  top: 69px;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+`
+
+export const StyledMarryBabyMenuPopupContainer = styled.div`
+  z-index: ${Z_INDEX.menuCategoryPopupContainer};
+
+  width: 100%;
+
+  max-height: 80vh;
+
+  padding: 20px 0;
+
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral50};
+  //align-items: center;
+  //display: flex;
+  //flex: 1;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+
+  border-radius: 16px;
+  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);
+
+  overflow-y: auto;
+`
+
+export const StyledMarryBabyMenuPopupInner = styled.div`
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 24px;
+`
+
+export const StyledMarryBabyHealthCategoriesContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`
+
+export const StyledMarryBabyCategoryItem = styled.div`
+  padding-right: 16px;
+  margin-bottom: 12px;
+
+  & > a {
+    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;
+  }
+
+  & > a:hover {
+    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  }
+
+  .iconMenu {
+    display: flex;
+    align-items: center;
+
+    > .imageContainer {
+      display: flex;
+      width: 32px;
+      min-width: 32px;
+      align-items: center;
+      margin-right: 16px;
+    }
+  }
+`

package/src/components/organisms/navigationLayout/menuSectionCard/cardSkeleton.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import Skeleton from 'react-loading-skeleton'
+
+import { StyledCardSkeleton } from './index.styled'
+
+const CardSkeleton = () => (
+  <>
+    <StyledCardSkeleton>
+      <div>
+        <Skeleton height={109} />
+      </div>
+      <div>
+        <Skeleton height={109} />
+      </div>
+      <div>
+        <Skeleton height={109} />
+      </div>
+      <div>
+        <Skeleton height={109} />
+      </div>
+      <div>
+        <Skeleton height={109} />
+      </div>
+      <div>
+        <Skeleton height={109} />
+      </div>
+    </StyledCardSkeleton>
+  </>
+)
+
+export default CardSkeleton

package/src/components/organisms/navigationLayout/menuSectionCard/index.styled.tsx

@@ -0,0 +1,46 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledCardSkeleton = styled.div`
+  & > div {
+    width: 100%;
+    min-height: 109px;
+  }
+`
+
+export const StyledCard = styled.div`
+  min-height: 116px;
+  padding: 8px 8px;
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral100};
+  //border-radius: 6px;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
+    0px 0px 1px rgba(0, 0, 0, 0.04);
+  text-align: center;
+  transition: 0.2s ease-in-out;
+
+  &[data-is-active='true'] {
+    background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    p {
+      color: ${(props: ThemeProps) => props.theme.colors.white};
+    }
+  }
+
+  & > :last-child {
+    margin-top: 8px;
+  }
+
+  &[data-card-position='left'] {
+    border-bottom-left-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+
+  &[data-card-position='right'] {
+    border-bottom-right-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  &[data-card-position='whatever'] {
+    border-radius: 6px;
+  }
+`

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

@@ -0,0 +1,52 @@
+import React from 'react'
+
+// import { Text } from '@hhgtech/hhg-components'
+// import { MenuService } from 'interfaces/types'
+
+import { Text } from 'components/atoms/text'
+
+import { MenuService, MenuServiceType } from '../types'
+import CardSkeleton from './cardSkeleton'
+import { StyledCard } from './index.styled'
+
+export type Props = {
+  specialty: MenuService
+  id: MenuServiceType
+  isActive?: boolean
+  onClick?: (i: string | number) => void
+  position?: 'left' | 'center' | 'right' | 'whatever'
+  isMobile?: boolean
+  className?: string
+}
+
+const MenuSectionCard = ({
+  specialty,
+  id,
+  isActive = false,
+  position,
+  className,
+  onClick,
+}: Props) => {
+  if (!specialty.name || specialty.name === '') return <CardSkeleton />
+  return (
+    <StyledCard
+      onClick={() => {
+        onClick && onClick(id)
+      }}
+      className={className}
+      data-is-active={isActive}
+      data-card-position={position}
+    >
+      <img
+        src={specialty.thumbnail}
+        style={{ objectFit: 'contain', height: '55px', width: '55px' }}
+        alt={'category-menu-card'}
+      />
+      <Text type="bold" size="label2">
+        {specialty.name}
+      </Text>
+    </StyledCard>
+  )
+}
+
+export { MenuSectionCard }

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

@@ -0,0 +1,121 @@
+import React from 'react'
+
+import { Button } from 'components/atoms/button'
+import { LocaleType } from 'interfaces/types'
+
+import { ChevronRightWhiteIcon } from '../assets'
+import { MenuCategoriesList } from '../menuCategoriesList'
+import { Category, SiteType, SpotlightSummary } from '../types'
+import { useTranslation } from '../utils'
+import {
+  StyledButtonContainerWrapper,
+  StyledCategoryButtonWrapper,
+  StyledScrollingCategories,
+  StyledScrollingWrapper,
+} from './index.styled'
+
+type Props = {
+  selectedMenuMainItem: Category
+  spotlightsList: SpotlightSummary[]
+  locale: LocaleType
+  basePath: string
+  callApiHandler: (p: string, m: 'GET' | 'POST' | 'PUT') => any
+  discoverApiDomain: string
+  DISCOVER_URL_FE: string
+  MARRY_BABY_FE: string
+  onSelectCategory: (category: Category) => void
+  siteType: SiteType
+  isMobile: boolean
+  onCategoryClick: () => void
+}
+
+const MenuSubItemListCategory = ({
+  selectedMenuMainItem,
+  spotlightsList,
+  locale,
+  basePath,
+  callApiHandler,
+  discoverApiDomain,
+  DISCOVER_URL_FE,
+  MARRY_BABY_FE,
+  onSelectCategory,
+  isMobile,
+  siteType,
+  onCategoryClick,
+}: Props) => {
+  const f = useTranslation()
+  const { childCates, categoryName } = selectedMenuMainItem
+  return (
+    <StyledScrollingCategories
+      data-type="sub-level"
+      data-with-search-input={false}
+    >
+      <StyledScrollingWrapper>
+        <MenuCategoriesList
+          isDisplayed
+          locale={locale}
+          basePath={basePath}
+          callApiHandler={callApiHandler}
+          discoverApiDomain={discoverApiDomain}
+          DISCOVER_URL_FE={DISCOVER_URL_FE}
+          MARRY_BABY_FE={MARRY_BABY_FE}
+          categories={childCates || []}
+          spotlightsList={spotlightsList}
+          type="sub"
+          onSelectCategory={onSelectCategory}
+          // onSubCategory={onSubCategory}
+          // onSubCatLevel={onSubCatLevel}
+          isMobile={isMobile}
+          siteType={siteType}
+          desktopPopupType="none"
+          isLoading={false}
+          onClosePopup={undefined}
+        />
+        <StyledCategoryButtonWrapper data-site-type={siteType}>
+          <Button
+            onClick={onCategoryClick}
+            className="category-button"
+            size="md"
+            theme={siteType}
+          >
+            <StyledButtonContainerWrapper>
+              <div>
+                {f('home.menu.category.view', {
+                  category: categoryName,
+                })}
+              </div>
+              {siteType === 'helloSites' ? (
+                <img
+                  src={ChevronRightWhiteIcon}
+                  style={{ width: '16px', height: '16px' }}
+                  className="button-image"
+                  alt={f('home.menu.category.view', {
+                    category: categoryName,
+                  })}
+                />
+              ) : (
+                <svg
+                  width="25"
+                  height="24"
+                  viewBox="0 0 25 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7 12H18M18 12L13.4118 8M18 12L13.4118 16"
+                    stroke="white"
+                    strokeWidth="1.3"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              )}
+            </StyledButtonContainerWrapper>
+          </Button>
+        </StyledCategoryButtonWrapper>
+      </StyledScrollingWrapper>
+    </StyledScrollingCategories>
+  )
+}
+
+export { MenuSubItemListCategory }

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

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react'
+
+import { Button } from 'components/atoms/button'
+import { LocaleType } from 'interfaces/types'
+
+import { ChevronRightWhiteIcon } from '../assets'
+import { MenuCommunitiesList } from '../menuCommunitiesList'
+import { Community, SiteType } from '../types'
+import {
+  formatCommunity,
+  formatTogetherTopic,
+  getTogetherDefaultCommunitiesSubMenuApiPath,
+  getTogetherMarryBabyCommunitiesSubMenuApiPath,
+  useTranslation,
+} from '../utils'
+import {
+  StyledButtonContainerWrapper,
+  StyledCategoryButtonWrapper,
+  StyledScrollingCategories,
+  StyledScrollingWrapper,
+} from './index.styled'
+
+type Props = {
+  selectedMenuMainItem: Community
+  onSelectCommunity: ({}: {
+    community: Community
+    isSetToSubMenu: boolean
+  }) => void
+  onCommunityClick: () => void
+  callApiHandler: (p: string, m: 'GET' | 'POST' | 'PUT') => any
+  basePath: string
+  togetherApiDomain: string
+  locale: LocaleType
+  TOGETHER_URL_FE: string
+  siteType: SiteType
+  isMobile: boolean
+}
+
+const MenuSubItemListCommunities = ({
+  selectedMenuMainItem,
+  onCommunityClick,
+  onSelectCommunity,
+  basePath = '',
+  callApiHandler,
+  togetherApiDomain,
+  locale,
+  TOGETHER_URL_FE,
+  siteType,
+  isMobile,
+}: Props) => {
+  // const { formatMessage: f } = useIntl()
+  const f = useTranslation()
+  // get community topic
+  const [subCommunities, setSubCommunities] = useState<Community[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const { communityId, title } = selectedMenuMainItem
+
+  useEffect(() => {
+    setIsLoading(true)
+    ;(async () => {
+      const communityTopicResults = await callApiHandler(
+        siteType === 'helloSites'
+          ? getTogetherDefaultCommunitiesSubMenuApiPath(
+              locale,
+              togetherApiDomain,
+              {
+                communityId: communityId,
+              },
+            )
+          : getTogetherMarryBabyCommunitiesSubMenuApiPath(
+              locale,
+              togetherApiDomain,
+              {
+                communityId: communityId,
+              },
+            ),
+        'GET',
+      )
+
+      if (
+        communityTopicResults !== null &&
+        communityTopicResults?.data?.data?.topics?.length > 0
+      ) {
+        const communityTopicFormatted: Community[] = communityTopicResults.data.data.topics.map(
+          formatTogetherTopic,
+        )
+        setSubCommunities(communityTopicFormatted)
+      }
+      setIsLoading(false)
+    })()
+  }, [selectedMenuMainItem])
+
+  return (
+    <StyledScrollingCategories
+      data-type="sub-level"
+      data-with-search-input={false}
+    >
+      <StyledScrollingWrapper>
+        <MenuCommunitiesList
+          isDisplayed
+          locale={locale}
+          communities={subCommunities}
+          type="sub"
+          onSelectCommunity={onSelectCommunity}
+          isLoading={isLoading}
+          basePath={basePath}
+          TOGETHER_URL_FE={TOGETHER_URL_FE}
+          togetherApiDomain={togetherApiDomain}
+          siteType={siteType}
+          isMobile={isMobile}
+          desktopPopupType="none"
+          onClosePopup={undefined}
+        />
+        <StyledCategoryButtonWrapper>
+          <Button
+            onClick={onCommunityClick}
+            className="category-button"
+            size="md"
+          >
+            <StyledButtonContainerWrapper>
+              <div>
+                {f('home.menu.category.view', {
+                  category: title,
+                })}
+              </div>
+              <img
+                src={ChevronRightWhiteIcon}
+                style={{ width: '16px', height: '16px' }}
+                className="button-image"
+                alt={f('home.menu.category.view', {
+                  category: title,
+                })}
+              />
+            </StyledButtonContainerWrapper>
+          </Button>
+        </StyledCategoryButtonWrapper>
+      </StyledScrollingWrapper>
+    </StyledScrollingCategories>
+  )
+}
+
+export { MenuSubItemListCommunities }