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

package/raw/components/organisms/navigationLayout/maryBabyFooter/index.tsx

@@ -0,0 +1,383 @@
+import React from 'react'
+
+import { FacebookIcon, YoutubeIcon, InstagramIcon, ZaloIcon } from 'assets/svg'
+import { Container } from 'components/atoms/container'
+import { Divider } from 'components/atoms/divider'
+import { Flag } from 'components/atoms/flag'
+import { Logo } from 'components/atoms/logo'
+import { LocaleType } from 'interfaces/types'
+import { theme } from 'misc/theme'
+import { CSSProperties } from 'styled-components'
+
+import { MARRY_BABY_DEFAULT_FOOTER } from '../constants'
+import { MarryBabyText } from '../marryBabyText'
+import { LogoType, MarryBabyFooterInfo } from '../types'
+import { useTranslation } from '../utils'
+import {
+  StyledFooterContainer,
+  StyledFooterMenu,
+  StyledCompanyInfo,
+  StyledMenuContainer,
+  StyledInfoContainer,
+  StyledMiniFooterContainer,
+  StyledRoundDecorator,
+} from './index.styled'
+
+// type link = {
+//   title: string
+//   link: string
+// }
+
+export type Country =
+  | 'VN'
+  | 'ID'
+  | 'TH'
+  | 'KH'
+  | 'MY'
+  | 'MM'
+  | 'PH'
+  | 'IN'
+  | 'TW'
+
+export type Flag = {
+  country: Country
+  link: string
+}
+
+export type Props = {
+  // bigLinks: Array<link>
+  // informationLinks: Array<link>
+  buttonText?: string
+  className?: string
+  socialLinks?: {
+    facebookLink?: string
+    twitterLink?: string
+    instagramLink?: string
+    zaloLink?: string
+    linkedinLink?: string
+    youtubeLink?: string
+  }
+  followusText?: string
+  copyrightText?: string
+  type: 'main' | 'mini'
+  logoType?: LogoType
+  isMobile: boolean
+  flagLinks?: Array<Flag>
+  footerMenu?: MarryBabyFooterInfo
+  locale: LocaleType
+}
+
+const MarryBabyFooter = ({
+  socialLinks: {
+    facebookLink,
+    instagramLink,
+    zaloLink,
+    youtubeLink,
+  } = MARRY_BABY_DEFAULT_FOOTER.SOCIAL_LINKS,
+  copyrightText,
+  logoType = 'marryBaby',
+  isMobile,
+  footerMenu = [],
+  type = 'main',
+}: Props) => {
+  const f = useTranslation()
+
+  return type === 'main' ? (
+    <StyledFooterContainer className="footer-container">
+      {!isMobile && (
+        <div className="footer-divider">
+          <Container type="marryBaby">
+            <Divider style={{ padding: '0 16px' }} type="solid" />
+          </Container>
+        </div>
+      )}
+
+      <StyledFooterMenu>
+        <Container type="marryBaby">
+          <StyledMenuContainer>
+            <div className="grid">
+              {(isMobile ? footerMenu?.slice(0, 6) : footerMenu)?.map(
+                ({ title, link }, i) => (
+                  <a
+                    data-event-category="Footer"
+                    data-event-action={title}
+                    data-event-label={`${link}`}
+                    className="link"
+                    href={link}
+                    key={`footer-links-${i}`}
+                  >
+                    <MarryBabyText
+                      color={theme.colors.gray800}
+                      type="subtitle-2"
+                    >
+                      {title}
+                    </MarryBabyText>
+                  </a>
+                ),
+              )}
+
+              <div className="social-wrapper">
+                <div className="social">
+                  <MarryBabyText type="subtitle-2">
+                    {f('footer.followUsText')}
+                  </MarryBabyText>
+                  <div className="icons-links">
+                    {facebookLink && (
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        data-event-category="Footer"
+                        data-event-action="Follow us - Facebook"
+                        data-content-label={facebookLink}
+                        href={facebookLink}
+                      >
+                        <img src={FacebookIcon} alt="Facebook" />
+                      </a>
+                    )}
+                    {youtubeLink && (
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        data-event-category="Footer"
+                        data-event-action="Follow us - Youtube"
+                        data-event-label={youtubeLink}
+                        href={youtubeLink}
+                      >
+                        <img src={YoutubeIcon} alt="Youtube" />
+                      </a>
+                    )}
+                    {instagramLink && (
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        data-event-category="Footer"
+                        data-event-action="Follow us - Instagram"
+                        data-content-label={instagramLink}
+                        href={instagramLink}
+                      >
+                        <img src={InstagramIcon} alt="Instagram" />
+                      </a>
+                    )}
+                    {zaloLink && (
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={zaloLink}
+                        data-event-category="Footer"
+                        data-event-action="Follow us - Zalo"
+                        data-event-label={zaloLink}
+                      >
+                        <img src={ZaloIcon} alt="Zalo" />
+                      </a>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </StyledMenuContainer>
+        </Container>
+      </StyledFooterMenu>
+
+      <StyledCompanyInfo>
+        <Container type="marryBaby">
+          <StyledInfoContainer>
+            <Logo className="logo" type={logoType as LogoType} width="121px" />
+            <MarryBabyText className="company-name" type="subtitle-2">
+              {f('footer.info.companyName')}
+            </MarryBabyText>
+
+            <div className="text-info">
+              <MarryBabyText type="bodytext-3">
+                {f('footer.info.address')}
+              </MarryBabyText>
+              <MarryBabyText type="bodytext-3">
+                {f('footer.info.license')}
+              </MarryBabyText>
+              <MarryBabyText type="bodytext-3">
+                {f('footer.info.email')}
+              </MarryBabyText>
+              {/* <MarryBabyText type="bodytext-3">
+                {f('footer.info.contentResponsibility')}
+              </MarryBabyText> */}
+              {/* <MarryBabyText type="bodytext-3">
+                {f('footer.info.certificate')}
+              </MarryBabyText> */}
+            </div>
+
+            <div className="img-container">
+              <img src="/images/dmca_protected.png" alt="DMCA protected" />
+              <a
+                href="http://online.gov.vn/Home/WebDetails/25055?AspxAutoDetectCookieSupport=1"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <img src="/images/mit_registered.png" alt="MIT registered" />
+              </a>
+            </div>
+
+            {!isMobile && <Divider type="solid" />}
+
+            <div className="language-and-copyright">
+              {/* <Dropdown
+              placeholder="Choose language"
+              id="footer-language-select"
+              options={languageDropdownOptions}
+              value={activeLanguage}
+              onChange={onSelectLanguage}
+              placeholderIcon={activeLanguage?.icon}
+            /> */}
+              <MarryBabyText type="bodytext-3">{copyrightText}</MarryBabyText>
+            </div>
+          </StyledInfoContainer>
+        </Container>
+      </StyledCompanyInfo>
+    </StyledFooterContainer>
+  ) : (
+    <StyledMiniFooterContainer>
+      <StyledRoundDecorator />
+      <MarryBabyText
+        type="subtitle-3"
+        style={
+          {
+            marginBottom: 24,
+            textTransform: 'uppercase',
+            fontWeight: theme.sizes.fwSemiBold,
+          } as CSSProperties
+        }
+        color={theme.mbColors.midGray}
+      >
+        {f('footer.followUsText')}
+      </MarryBabyText>
+      <div className="icons-links">
+        {facebookLink && (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            data-event-category="Footer"
+            data-event-action="Follow us - Facebook"
+            data-content-label={facebookLink}
+            href={facebookLink}
+          >
+            {/* <img src="/svg/facebook.svg" alt="Facebook" /> */}
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M21 5.75V18.25C21 19.765 19.765 21 18.25 21H15.5V14H17.31C17.565 14 17.78 13.81 17.81 13.56L17.995 12.06C18.015 11.92 17.97 11.775 17.875 11.67C17.78 11.56 17.645 11.5 17.5 11.5H15.5V9.75C15.5 9.2 15.95 8.75 16.5 8.75H17.5C17.775 8.75 18 8.525 18 8.25V6.56C18 6.305 17.8 6.09 17.545 6.065C17.515 6.06 16.81 6 15.915 6C13.715 6 12.5 7.31 12.5 9.685V11.5H10.5C10.225 11.5 10 11.725 10 12V13.5C10 13.775 10.225 14 10.5 14H12.5V21H5.75C4.235 21 3 19.765 3 18.25V5.75C3 4.235 4.235 3 5.75 3H18.25C19.765 3 21 4.235 21 5.75Z"
+                fill="url(#paint0_linear)"
+              />
+              <defs>
+                <linearGradient
+                  id="paint0_linear"
+                  x1="12"
+                  y1="3"
+                  x2="12"
+                  y2="21"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#4DABF7" />
+                  <stop offset="1" stopColor="#2668DA" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </a>
+        )}
+        {youtubeLink && (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            data-event-category="Footer"
+            data-event-action="Follow us - Youtube"
+            data-event-label={youtubeLink}
+            href={youtubeLink}
+          >
+            {/* <img src="/svg/youtube.svg" alt="Youtube" /> */}
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.9287 4.25C8.75236 4.25 5.80117 4.47631 4.11719 4.82812C4.1136 4.82907 4.11002 4.83005 4.10645 4.83105C2.83774 5.11535 1.64309 6.02412 1.3916 7.44727L1.39062 7.45312C1.19742 8.60013 1 10.0953 1 12.25C1 14.4006 1.1981 15.8562 1.44238 17.0635C1.70004 18.4446 2.86711 19.3809 4.15527 19.6689C4.16144 19.6707 4.16762 19.6723 4.17383 19.6738C5.93135 20.0201 8.79923 20.25 11.9756 20.25C15.1519 20.25 18.0213 20.0201 19.7793 19.6738C19.7855 19.6723 19.7917 19.6707 19.7979 19.6689C21.0666 19.3847 22.2612 18.4759 22.5127 17.0527C22.5134 17.0492 22.514 17.0456 22.5146 17.042C22.7049 15.8716 22.9514 14.3778 23 12.2197C23.0001 12.2142 23.0001 12.2087 23 12.2031C23 10.0438 22.7529 8.53934 22.5117 7.34766C22.2561 5.96354 21.0877 5.02474 19.7979 4.73633C19.7781 4.73195 19.7583 4.72836 19.7383 4.72559C18.0232 4.48448 15.1056 4.25 11.9287 4.25ZM10.0781 8.50098C10.2633 8.49715 10.4548 8.54095 10.6348 8.64258L14.9365 11.0732C15.662 11.4832 15.662 12.5177 14.9365 12.9277L10.6348 15.3584C9.91527 15.7644 9.01855 15.2502 9.01855 14.4307V9.56934C9.01855 8.95471 9.52252 8.51246 10.0781 8.50098Z"
+                fill="#EB3223"
+              />
+            </svg>
+          </a>
+        )}
+        {instagramLink && (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            data-event-category="Footer"
+            data-event-action="Follow us - Instagram"
+            data-content-label={instagramLink}
+            href={instagramLink}
+          >
+            {/* <img src="/svg/instagram.svg" alt="Instagram" /> */}
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.25 2.5C5.08319 2.5 2.5 5.08319 2.5 8.25V15.75C2.5 18.9164 5.0831 21.5 8.25 21.5H15.75C18.9165 21.5 21.5 18.9165 21.5 15.75V8.25C21.5 5.0831 18.9164 2.5 15.75 2.5H8.25ZM8.25 4H15.75C18.1056 4 20 5.8939 20 8.25V15.75C20 18.1055 18.1055 20 15.75 20H8.25C5.8939 20 4 18.1056 4 15.75V8.25C4 5.89381 5.89381 4 8.25 4ZM17 6C16.4475 6 16 6.4475 16 7C16 7.5525 16.4475 8 17 8C17.5525 8 18 7.5525 18 7C18 6.4475 17.5525 6 17 6ZM12 7C9.24759 7 7 9.24759 7 12C7 14.7524 9.24759 17 12 17C14.7524 17 17 14.7524 17 12C17 9.24759 14.7524 7 12 7ZM12 8.5C13.9416 8.5 15.5 10.0584 15.5 12C15.5 13.9416 13.9416 15.5 12 15.5C10.0584 15.5 8.5 13.9416 8.5 12C8.5 10.0584 10.0584 8.5 12 8.5Z"
+                fill="url(#paint0_radial)"
+              />
+              <defs>
+                <radialGradient
+                  id="paint0_radial"
+                  cx="0"
+                  cy="0"
+                  r="1"
+                  gradientUnits="userSpaceOnUse"
+                  gradientTransform="translate(0.499995 26) rotate(-47.9508) scale(34.3402 30.014)"
+                >
+                  <stop offset="0.073" stopColor="#EACC7B" />
+                  <stop offset="0.184" stopColor="#ECAA59" />
+                  <stop offset="0.307" stopColor="#EF802E" />
+                  <stop offset="0.358" stopColor="#EF6D3A" />
+                  <stop offset="0.46" stopColor="#F04B50" />
+                  <stop offset="0.516" stopColor="#F03E58" />
+                  <stop offset="0.689" stopColor="#DB359E" />
+                  <stop offset="0.724" stopColor="#CE37A4" />
+                  <stop offset="0.789" stopColor="#AC3CB4" />
+                  <stop offset="0.877" stopColor="#7544CF" />
+                  <stop offset="0.98" stopColor="#2B4FF2" />
+                </radialGradient>
+              </defs>
+            </svg>
+          </a>
+        )}
+        {zaloLink && (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={zaloLink}
+            data-event-category="Footer"
+            data-event-action="Follow us - Zalo"
+            data-event-label={zaloLink}
+          >
+            <div
+              style={{
+                height: 24,
+                width: 24,
+              }}
+            >
+              <img src="/icons/zalo.png" alt="Zalo" />
+            </div>
+          </a>
+        )}
+      </div>
+    </StyledMiniFooterContainer>
+  )
+}
+
+export { MarryBabyFooter }

package/raw/components/organisms/navigationLayout/menuCareList/categorySkeleton.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import Skeleton from 'react-loading-skeleton'
+
+import { StyledCardSkeleton } from './index.styled'
+
+const CategorySkeleton = () => (
+  <StyledCardSkeleton
+    style={{
+      marginTop: '16px',
+    }}
+  >
+    <div>
+      <Skeleton height={46} />
+    </div>
+    <div>
+      <Skeleton height={46} />
+    </div>
+    <div>
+      <Skeleton height={46} />
+    </div>
+  </StyledCardSkeleton>
+)
+
+export default CategorySkeleton

package/raw/components/organisms/navigationLayout/menuCareList/index.styled.tsx

@@ -0,0 +1,156 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+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`
+  & > a:not(:last-child) > div {
+    border-bottom: 1px solid
+      ${(props: ThemeProps) => props.theme.colors.neutral100};
+  }
+
+  &[data-category-list-type='sub'] {
+    padding-bottom: 72px;
+  }
+
+  &[data-is-displayed='false'] {
+    display: none;
+  }
+`
+export const StyledCategoryContainer = styled.div`
+  display: flex;
+  width: 100%;
+  height: 64px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px;
+
+  //border-bottom: 1px solid ${(props: ThemeProps) =>
+    props.theme.colors.neutral100};
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+
+  &[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;
+
+  & > 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;
+
+  ${MediaQueries.mbDown} {
+    padding: 8px;
+  }
+
+  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;
+`