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

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

@@ -0,0 +1,448 @@
+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/raw/components/organisms/footer/index.stories.tsx

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