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

package/raw/src/components/organisms/navigationLayout/footer/index.tsx

@@ -0,0 +1,449 @@
+import React from 'react'
+
+import { Button } from 'components/atoms/button'
+import { Container } from 'components/atoms/container'
+import { Text } from 'components/atoms/text'
+import { LocaleType } from 'interfaces/types'
+import { theme } from 'misc/theme'
+
+import { domainLocales } from '../constants'
+import { FooterInfo } from '../types'
+import { useTranslation } from '../utils'
+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 Footer = ({
+  className,
+  type = 'main',
+  footerInfo,
+  isMobile,
+  locale,
+  isAmp,
+}: Props) => {
+  const f = useTranslation()
+
+  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">
+                    {f('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 { Footer }