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

package/src/components/organisms/footer/discoverFooter/index.tsx

@@ -1,448 +0,0 @@
-import React from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Container } from 'components/atoms/container'
-import { Text } from 'components/atoms/text'
-import { domainLocales } from 'interfaces/constants'
-import { LocaleType, FooterInfo } from 'interfaces/types'
-import { theme } from 'misc/theme'
-import { useTranslations } from 'src/hooks/useTranslations'
-
-import { StyledFooter, StyledFlag } from './index.styled'
-
-export type Props = {
-  className?: string
-  isMobile: boolean
-  type?: 'main' | 'mini'
-  footerInfo?: FooterInfo
-  locale: LocaleType
-  isAmp: boolean
-}
-
-type IItem = {
-  title: string
-  url: string
-}
-
-type ISocial = {
-  icon: string
-  name: string
-  url: string
-}
-
-type IBranch = {
-  flag: string
-  name: string
-  url: string
-}
-
-type FlagProps = {
-  url: string
-  isMobile?: boolean
-  dataEventCategory?: string
-  dataEventAction?: string
-  dataEventLabel?: string
-}
-
-const Flag = ({
-  url,
-  isMobile,
-  dataEventCategory,
-  dataEventAction,
-  dataEventLabel,
-}: FlagProps) => {
-  return (
-    <StyledFlag data-is-mobile={isMobile}>
-      <img
-        className="country-flag"
-        src={url}
-        alt="Country Flag"
-        data-event-category={dataEventCategory}
-        data-event-action={dataEventAction}
-        data-content-label={dataEventLabel}
-      />
-    </StyledFlag>
-  )
-}
-
-const DiscoverFooter = ({
-  className,
-  type = 'main',
-  footerInfo,
-  isMobile,
-  locale,
-  isAmp,
-}: Props) => {
-  const { t } = useTranslations()
-
-  const footerMenu = footerInfo?.menu
-
-  return (
-    <StyledFooter
-      as={isAmp && type === 'mini' ? 'div' : 'footer'}
-      className={className}
-      style={
-        type === 'mini'
-          ? {
-              backgroundColor: theme.colors.neutral50,
-            }
-          : {}
-      }
-      next-page-hide
-    >
-      <Container>
-        <div className="inner" data-type={type} next-page-hide="">
-          {type === 'main' ? (
-            <>
-              <a href="/">
-                {!isAmp ? (
-                  <img
-                    className="footer-logo"
-                    src={footerInfo?.general?.logo}
-                    alt="Logo"
-                    data-is-sehat={locale === 'id-ID'}
-                  />
-                ) : footerInfo?.general?.logo ? (
-                  <amp-img
-                    src={footerInfo?.general?.logo}
-                    alt="Site logo"
-                    width="132"
-                    height="32"
-                    style={{
-                      marginBottom: 24,
-                    }}
-                  />
-                ) : null}
-              </a>
-              <div className="columns">
-                <div className="newsletter">
-                  <Text size="p1" type="bold">
-                    {footerInfo?.general?.content}
-                  </Text>
-                  <Button className="signupButton" color="primary" size="lg">
-                    {t('footer.signUp')}
-                  </Button>
-                  <div className="social">
-                    <Text size="sm" type="regular">
-                      {footerInfo?.social?.title}
-                    </Text>
-                    <div className="icons">
-                      {footerInfo?.social?.socials?.map(
-                        (social: ISocial, idx: number) => (
-                          <a
-                            key={idx}
-                            data-event-category="Footer"
-                            data-event-action={`Follow us - ${social.name}`}
-                            data-content-label={social.url}
-                            href={social.url}
-                          >
-                            {!isAmp ? (
-                              <img
-                                data-event-category="Footer"
-                                data-event-action={`Follow us - ${social.name}`}
-                                data-content-label={social.url}
-                                src={social.icon}
-                                alt="Logo Social"
-                                className="social-icon"
-                              />
-                            ) : (
-                              <amp-img
-                                data-event-category="Footer"
-                                data-event-action={`Follow us - ${social.name}`}
-                                data-content-label={social.url}
-                                src={social.icon}
-                                alt="Logo Social"
-                                width="32"
-                                height="32"
-                              ></amp-img>
-                            )}
-                          </a>
-                        ),
-                      )}
-                    </div>
-                    <hr className="hrMobile" />
-                  </div>
-                </div>
-                <div>
-                  {footerMenu && (
-                    <>
-                      <div className="biglinks">
-                        {footerMenu[0]?.items?.map(
-                          (bigLink: IItem, idx: number) => (
-                            <a
-                              data-event-category="Footer"
-                              data-event-action={bigLink.title}
-                              data-event-label={`https://${domainLocales[locale]}${bigLink.url}`}
-                              className="bigLink"
-                              key={idx}
-                              href={bigLink.url}
-                            >
-                              {bigLink.title}
-                            </a>
-                          ),
-                        )}
-                      </div>
-                      <hr className="hrMobile" />
-                      <div className="mHalf">
-                        <Text type="regular" size="sm" className="linkTitle">
-                          {footerMenu[1]?.menu_title}
-                        </Text>
-
-                        {footerMenu[1]?.items?.map(
-                          (informationLink: IItem, idx: number) => (
-                            <a
-                              data-event-category="Footer"
-                              data-event-action={informationLink.title}
-                              data-event-label={`https://${domainLocales[locale]}${informationLink.url}`}
-                              className="link"
-                              href={informationLink.url}
-                              key={idx}
-                            >
-                              <Text
-                                size="sm"
-                                type="regular"
-                                dataEventCategory="Footer"
-                                dataEventAction={informationLink.title}
-                                dataEventLabel={`https://${domainLocales[locale]}${informationLink.url}`}
-                              >
-                                {informationLink.title}
-                              </Text>
-                            </a>
-                          ),
-                        )}
-                      </div>
-                      <div className="mHalf">
-                        <Text type="regular" size="sm" className="linkTitle">
-                          {footerMenu[2]?.menu_title}
-                        </Text>
-
-                        {footerMenu[2]?.items?.map(
-                          (hellohealthlink: IItem, idx: number) =>
-                            hellohealthlink.url && (
-                              <a
-                                data-event-category="Footer"
-                                data-event-action={hellohealthlink.title}
-                                data-event-label={hellohealthlink.url}
-                                className="link"
-                                href={hellohealthlink.url}
-                                key={idx}
-                              >
-                                <Text
-                                  size="sm"
-                                  type="regular"
-                                  dataEventCategory="Footer"
-                                  dataEventAction={hellohealthlink.title}
-                                  dataEventLabel={hellohealthlink.url}
-                                >
-                                  {hellohealthlink.title}
-                                </Text>
-                              </a>
-                            ),
-                        )}
-                      </div>
-                    </>
-                  )}
-                  {!isAmp && (
-                    <>
-                      <hr className="hrMobile" />
-                      <div className="otherSites">
-                        <Text type="regular" size="sm" className="linkTitle">
-                          {footerInfo?.branch?.title}
-                        </Text>
-                        <div className="flags">
-                          {footerInfo?.branch?.branch?.map(
-                            (flagLink: IBranch, idx: number) => (
-                              <a
-                                className="link"
-                                href={flagLink.url}
-                                key={idx}
-                                data-event-category="Footer"
-                                data-event-action={flagLink.name}
-                                data-event-label={flagLink.url}
-                              >
-                                <Flag
-                                  url={flagLink.flag}
-                                  isMobile={isMobile}
-                                  dataEventCategory="Footer"
-                                  dataEventAction={flagLink.name}
-                                  dataEventLabel={flagLink.url}
-                                />
-                              </a>
-                            ),
-                          )}
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              <hr />
-              <div className="copyright" data-is-amp={isAmp || undefined}>
-                {footerInfo?.general?.verified && (
-                  <a
-                    href={footerInfo?.general?.verified[0]?.url}
-                    className="copyright-image"
-                  >
-                    {isAmp ? (
-                      <amp-img
-                        src={footerInfo?.general?.verified[0]?.image}
-                        alt="DMCA Icon"
-                        width="100"
-                        height="36"
-                      ></amp-img>
-                    ) : (
-                      <img
-                        src={footerInfo?.general?.verified[0]?.image}
-                        alt="DMCA Icon"
-                      />
-                    )}
-                  </a>
-                )}
-
-                <Text size="xs" type="regular" className="copyright-content">
-                  {footerInfo?.general?.copyright}
-                </Text>
-              </div>
-              {locale === 'vi-VN' && (
-                <Text
-                  className="copyright-certificate"
-                  size="xs"
-                  type="regular"
-                  color="white"
-                >
-                  Giấy xác nhận cung cấp dịch vụ mạng xã hội trực tuyến số
-                  529/GP-BTTTT, HN ngày 03/12/2019
-                </Text>
-              )}
-            </>
-          ) : (
-            <>
-              {footerInfo?.menu && (
-                <div className="columns">
-                  <div className="mHalf">
-                    <Text type="regular" size="sm" className="linkTitle">
-                      {footerInfo?.menu[1]?.menu_title}
-                    </Text>
-
-                    {footerInfo?.menu[1]?.items?.map(
-                      (informationLink: IItem) => (
-                        <a
-                          className="link"
-                          href={informationLink.url}
-                          key={informationLink.title}
-                          data-list-type="Footer"
-                          data-content-type="Navigate"
-                          data-content-topic="Information"
-                          data-content-title={informationLink.title}
-                          data-content-id={`https://${domainLocales[locale]}${informationLink.url}`}
-                          data-event-category="Footer"
-                          data-event-action={informationLink.title}
-                          data-event-label={`https://${domainLocales[locale]}${informationLink.url}`}
-                        >
-                          <Text
-                            dataEventCategory="Footer"
-                            dataEventAction={informationLink.title}
-                            dataEventLabel={`https://${domainLocales[locale]}${informationLink.url}`}
-                            size="sm"
-                            type="regular"
-                            style={{
-                              color: theme.colors.gray800,
-                            }}
-                          >
-                            {informationLink.title}
-                          </Text>
-                        </a>
-                      ),
-                    )}
-                  </div>
-                  <div className="mHalf">
-                    <Text type="regular" size="sm" className="linkTitle">
-                      {footerInfo?.menu[2]?.menu_title}
-                    </Text>
-
-                    {footerInfo?.menu[2]?.items?.map(
-                      (hellohealthlink: IItem, idx: number) => (
-                        <a
-                          className="link"
-                          href={hellohealthlink.url}
-                          key={idx}
-                          data-list-type="Footer"
-                          data-content-type="Navigate"
-                          data-content-topic="Hello Health"
-                          data-content-title={hellohealthlink.title}
-                          data-content-id={hellohealthlink.url}
-                          data-event-category="Footer"
-                          data-event-action={hellohealthlink.title}
-                          data-event-label={hellohealthlink.url}
-                        >
-                          <Text
-                            size="sm"
-                            type="regular"
-                            style={{
-                              color: theme.colors.gray800,
-                            }}
-                            dataEventCategory="Footer"
-                            dataEventAction={hellohealthlink.title}
-                            dataEventLabel={hellohealthlink.url}
-                          >
-                            {hellohealthlink.title}
-                          </Text>
-                        </a>
-                      ),
-                    )}
-                  </div>
-
-                  {!isAmp && type !== 'mini' && <hr className="hrMobile" />}
-                  <div className="newsletter">
-                    <div className="social">
-                      <Text size="sm" type="regular">
-                        {footerInfo?.social?.title}
-                      </Text>
-                      <div className="icons">
-                        {footerInfo?.social?.socials?.map(
-                          (social: ISocial, idx: number) => (
-                            <a
-                              key={idx}
-                              data-event-category="Footer"
-                              data-event-action={`Follow us - ${social.name}`}
-                              data-content-label={social.url}
-                              href={social.url}
-                            >
-                              {!isAmp ? (
-                                <img
-                                  data-event-category="Footer"
-                                  data-event-action={`Follow us - ${social.name}`}
-                                  data-content-label={social.url}
-                                  src={social.icon}
-                                  alt="Logo Social"
-                                  className="social-icon"
-                                />
-                              ) : (
-                                <amp-img
-                                  data-event-category="Footer"
-                                  data-event-action={`Follow us - ${social.name}`}
-                                  data-content-label={social.url}
-                                  src={social.icon}
-                                  alt="Logo Social"
-                                  width="32"
-                                  height="32"
-                                ></amp-img>
-                              )}
-                            </a>
-                          ),
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </Container>
-    </StyledFooter>
-  )
-}
-
-export { DiscoverFooter }

package/src/components/organisms/footer/index.stories.tsx

@@ -1,207 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Footer, Props } from '.'
-import { TranslationsProvider } from '../../../i18n/translationsProvider'
-
-export default {
-  component: Footer,
-  title: 'Organisms/Footer',
-}
-
-const FooterTemplate: Story<Props> = (args) => {
-  return <Footer {...args} />
-}
-export const Discover = FooterTemplate.bind({})
-Discover.args = {
-  type: 'main',
-  locale: 'vi-VN',
-  isMobile: false,
-  isAmp: false,
-  footerInfo: {
-    general: {
-      logo: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/Logo-1.png',
-      content:
-        'Hello Bacsi mong muốn trở thành nền tảng thông tin y khoa hàng đầu tại Việt Nam, giúp bạn đưa ra những quyết định đúng đắn liên quan về chăm sóc sức khỏe và hỗ trợ bạn cải thiện chất lượng cuộc sống.',
-      copyright:
-        '© 2022 Bản quyền các bài viết thuộc tập đoàn Hello Health Group. Các bài viết của Hello Bacsi chỉ có tính chất tham khảo, không thay thế cho việc chẩn đoán hoặc điều trị y khoa.',
-      verified: [
-        {
-          image:
-            'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/dmca.png',
-          url: 'https://www.dmca.com/Protection/Status.aspx?ID=752026fa-bb3c-450e-b184-b8051d04e5c4&refurl=https://hellobacsi.com/',
-        },
-      ],
-    },
-    menu: [
-      {
-        menu_title: '',
-        items: [
-          { title: 'Chuyên đề sức khỏe', url: 'https://hellobacsi.com/' },
-          {
-            title: 'Kiểm tra sức khỏe',
-            url: 'https://hellobacsi.com/health-tools',
-          },
-          { title: 'Tìm bệnh viện ', url: 'https://hellobacsi.com/care/' },
-          { title: 'Cộng đồng', url: 'https://hellobacsi.com/community' },
-        ],
-      },
-      {
-        menu_title: 'Thông tin',
-        items: [
-          {
-            title: ' Điều khoản sử dụng',
-            url: 'https://hellobacsi.com/static/dieu-khoan-su-dung/',
-          },
-          {
-            title: 'Chính sách Quyền riêng tư',
-            url: 'https://hellobacsi.com/static/chinh-sach-quyen-rieng-tu/',
-          },
-          {
-            title: 'Chính sách Biên tập và Chỉnh sửa',
-            url: 'https://hellobacsi.com/static/chinh-sach-bien-tap-chinh-sua/',
-          },
-          {
-            title: 'Chính sách Quảng cáo và Tài trợ',
-            url: 'https://hellobacsi.com/static/chinh-sach-quang-cao-tai-tro/',
-          },
-          {
-            title: 'Câu hỏi thường gặp',
-            url: 'https://hellobacsi.com/static/thong-tin-quan-trong/',
-          },
-          {
-            title: 'Tiêu chuẩn cộng đồng',
-            url: 'https://hellobacsi.com/static/tieu-chuan-cong-dong/',
-          },
-        ],
-      },
-      {
-        menu_title: 'Hello Health',
-        items: [
-          { title: 'Tự giới thiệu', url: 'https://hellobacsi.com/about-us/' },
-          {
-            title: 'Ban điều hành',
-            url: 'https://hellohealthgroup.com/vietnam/',
-          },
-          { title: 'Tuyển dụng', url: 'https://hellohealthgroup.com/careers/' },
-          {
-            title: 'Quảng cáo',
-            url: 'https://hellobacsi.com/static/quang-cao-voi-chung-toi/',
-          },
-          { title: 'Liên hệ ', url: 'https://hellobacsi.com/static/lien-he/' },
-        ],
-      },
-    ],
-    social: {
-      title: 'Kết nối với chúng tôi',
-      socials: [
-        {
-          icon: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/Facebook.png',
-          name: 'Facebook',
-          url: 'https://www.facebook.com/hellobacsi/',
-        },
-        {
-          icon: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/Instagram.png',
-          name: 'Instagram',
-          url: 'https://www.instagram.com/hellobacsi/',
-        },
-        {
-          icon: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/Linkedin.png',
-          name: 'Linkedin',
-          url: 'https://www.linkedin.com/company/hello-health-group/',
-        },
-        {
-          icon: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/Youtube.png',
-          name: 'Youtube',
-          url: 'https://www.youtube.com/channel/UCYHzHDXngnB7jkmcQgXwE0w',
-        },
-      ],
-    },
-    branch: {
-      title: 'Khám phá những trang khác thuộc tập đoàn Hello Health Group',
-      branch: [
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/ID.png',
-          name: 'HelloSehat',
-          url: 'https://hellosehat.com/',
-        },
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/TH.png',
-          name: 'HelloKhunmor',
-          url: 'https://hellokhunmor.com/',
-        },
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/MY.png',
-          name: 'HelloDoktor',
-          url: 'https://hellodoktor.com/',
-        },
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/KH.png',
-          name: 'HelloKrupet',
-          url: 'https://hellokrupet.com/',
-        },
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/CountryTaiwan-ShapeRound.png',
-          name: 'HelloYishi',
-          url: 'https://helloyishi.com.tw/',
-        },
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/MM.png',
-          name: 'HelloSayarwon',
-          url: 'https://hellosayarwon.com/',
-        },
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/IN.png',
-          name: 'HelloSwasthya',
-          url: 'https://helloswasthya.com/',
-        },
-        {
-          flag: 'https://cdn.hellobacsi.com/wp-content/uploads/2021/08/PH.png',
-          name: 'HelloDoctor',
-          url: 'https://hellodoctor.com.ph/',
-        },
-      ],
-    },
-  },
-  siteType: 'helloSites',
-} as Props
-export const MarryBaby = FooterTemplate.bind({})
-MarryBaby.args = {
-  type: 'main',
-  locale: 'vi-VN',
-  isMobile: false,
-  isAmp: false,
-  footerInfo: [
-    { title: 'Giới thiệu', link: 'https://www.marrybaby.vn/static/gioi-thieu' },
-    {
-      title: 'Quy chế hoạt động',
-      link: 'https://www.marrybaby.vn/static/quy-che-hoat-dong',
-    },
-    {
-      title: 'Chính sách riêng tư',
-      link: 'https://www.marrybaby.vn/static/chinh-sach-rieng-tu',
-    },
-    {
-      title: 'Chính sách giải quyết khiếu nại',
-      link: 'https://www.marrybaby.vn/static/chinh-sach-giai-quyet-khieu-nai',
-    },
-    {
-      title: 'Điều khoản sử dụng',
-      link: 'https://www.marrybaby.vn/static/dieu-khoan-su-dung',
-    },
-    {
-      title: 'Câu hỏi thường gặp',
-      link: 'https://www.marrybaby.vn/static/cau-hoi-thuong-gap',
-    },
-  ],
-  siteType: 'marryBaby',
-  marryBabySocialLinks: {
-    facebookLink: 'https://www.facebook.com/marry.baby.vn',
-    instagramLink: 'https://www.instagram.com/marrybaby.vn/',
-    linkedinLink: 'https://www.linkedin.com/company/hello-health-group/',
-    twitterLink: '',
-    youtubeLink: 'https://www.youtube.com/user/marrybabyvn',
-    zaloLink: 'http://zalo.me/806483414530291942',
-  },
-} as Props