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

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

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

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

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

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

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

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

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