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

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

@@ -1,449 +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 { 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 }