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

package/raw/components/organisms/navigationLayout/languageWrapper.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { Props, NavigationLayout as NavigationLayoutElement } from './index'
+import { defaultTranslation } from './languages/default'
+import { NaContext } from './utils'
+
+const NavigationLayout = (props: Props) => {
+  return (
+    <NaContext.Provider
+      value={{
+        translation: props.translation || defaultTranslation,
+      }}
+    >
+      <NavigationLayoutElement {...props} />
+    </NaContext.Provider>
+  )
+}
+
+export { NavigationLayout }

package/raw/components/organisms/navigationLayout/languages/default.ts

@@ -0,0 +1,63 @@
+const defaultTranslation: { [key: string]: string } = {
+  'navigation.loginJoin': 'Login/Join',
+  'menu.categories.title': 'Choose a service to explore',
+  'home.search': 'Search {site}',
+  'home.navigator.menuItem.spotlights': 'All In Focus',
+  'home.navigator.menuItem.helloTogether': 'Communities',
+  'home.navigator.menuItem.helloCare': 'Book a doctor',
+  'home.navigator.menuItem.healthTools': 'Health Tools',
+  'home.navigator.menuItem.healthCategories': 'Health Categories',
+  'home.navigator.menuItem.discover': 'Discover',
+  'home.navigator.menuItem.allSpotlight': 'See All In Focus',
+  'home.navigator.menuItem.allSpecialties': 'See All Specialties',
+  'home.navigator.menuItem.allHealthTools': 'See All Health Tools',
+  'home.navigator.menuItem.allCommunities': 'See All Communities',
+  'home.navigator.menuItem.allCategories': 'See All Categories',
+  'footer.sitemap': 'Sitemap',
+  'footer.signUp':
+    'Sign up to get fitness and nutrition tips, health news, and more.',
+  'footer.info.email': 'Email: advertiser@hellohealthgroup.com',
+  'footer.info.license':
+    'Giấy phép kinh doanh số: 0315857817 do Sở kế hoạch và Đầu tư TP. Hồ Chí Minh cấp ngày 21-8-2019',
+  'footer.info.contentResponsibility':
+    'Chịu trách nhiệm quản lý nội dung: Hoàng Diệu Thu',
+  'footer.info.companyName': 'Công ty TNHH Xin Chào Bác Sĩ',
+  'footer.info.certificate':
+    'Giấy xác nhận cung cấp dịch vụ mạng xã hội trực tuyến số 592/GP-BTTTT HN ngày 03/12/2019',
+  'footer.info.address':
+    'Địa chỉ: Tầng 5, Tòa nhà Sonatus, 15 Lê Thánh Tôn, P.Bến Nghé, Quận 1, Thành phố Hồ Chí Minh',
+  'footer.followUsText': 'Follow us',
+  'home.menu.category.view': 'Xem {category}',
+  'menu.care.searchBySpecialties': 'Tìm theo chuyên khoa',
+  'logout.popup.ask1': 'Log Out of Hello Doctor?',
+  'logout.popup.ask2': 'Are you sure you want to log out?',
+  'logout.popup.ask.mb': 'Đăng xuất khỏi Marry Baby?',
+  'logout.popup.button.cancel': 'Cancel',
+  'logout.popup.button.logout': 'Log Out',
+  'profileMenu.accountSetting': 'Account Setting',
+  // "profileMenu.closeAccount": "Close Account",
+  'profileMenu.help': 'Help',
+  'profileMenu.logout': 'Logout',
+  // "profileMenu.manageEmailNotifications": "Manage Email Notifications",
+  'profileMenu.myProfile': 'Profile',
+  'profileMenu.password': 'Password',
+  'profileMenu.saved': 'My Articles',
+  // "profileMenu.updateEmail": "Update Email",
+  'home.navigator.menuItem.language': 'Language',
+  'articlePage.sponsoredBy': 'Sponsored By',
+  'articlePage.sponsoredContentBy': 'Content sponsored  by',
+  'articlePage.sponsoredContent': 'Sponsored Content',
+  'articlePage.sponsoredArticle': 'Sponsored Article',
+  'articlePage.sponsoredByStickyPopup.close': 'Close',
+  'articlePage.sponsoredByStickyPopup.content':
+    'This is a sponsored article, for more information on our Advertising and Sponsorship policy please read our policies.',
+  'articlePage.sponsoredByStickyPopup.policies': 'Policies',
+  'login.booking': 'Booking with doctor',
+  'cookiePolicies.modal.title': 'Please accept our privacy policy',
+  'cookiePolicies.modal.description':
+    'Hello Bacsi uses cookies to improve your experience and to show you personalized ads',
+  'cookiePolicies.modal.accept': 'Accept',
+  'cookiePolicies.modal.ourPolicies': 'Our Policies',
+}
+
+export { defaultTranslation }

package/raw/components/organisms/navigationLayout/layout.tsx

@@ -0,0 +1,406 @@
+import React, { ReactNode } from 'react'
+
+import {
+  domainLocales,
+  FAVICONS,
+  LOCALE_SPECS,
+} from 'components/organisms/navigationLayout/constants'
+import parse from 'html-react-parser'
+
+// import Head from 'next/head'
+// import { useRouter } from 'next/router'
+import { SiteType } from './types'
+
+export type SEOData = {
+  currentPage?: number
+  totalPages?: number
+  SEOTitle?: string
+  SEODescription?: string
+  SEOImage?: string
+  SEOImageWidth?: string | number
+  SEOImageHeight?: string | number
+  seoType?: 'website' | 'article' | 'profile'
+  siteName?: string
+  customMetaData?: Array<{
+    [key: string]: string
+  }>
+  isIndexable?: boolean
+  openGraph?: {
+    title?: string
+    description?: string
+    image?: string
+    imageWidth?: number
+    imageHeight?: number
+  }
+  twitter?: {
+    title?: string
+    description?: string
+    image?: string
+  }
+  apiMetaData?: string
+  schemaData?: string
+  hasNoAmp?: boolean
+  hasNoCanonical?: boolean
+  canonicalUrl?: string
+}
+
+export type Props = {
+  children: ReactNode
+  SEOData: SEOData
+  isAmp: boolean
+  locale: string
+  routerPathname: string
+  routerQuery: { [key: string]: string }
+  nextHead: React.FunctionComponent
+  siteType: SiteType
+  seoCustom?: boolean
+  userId?: string | number
+  forcedCanonicalUrl?: string
+  usingDefaultHead: boolean
+}
+
+const Layout = ({
+  children,
+  SEOData = {},
+  isAmp = false,
+  locale = 'vi-VN',
+  routerPathname: pathname,
+  routerQuery: query,
+  nextHead: Head,
+  siteType,
+  seoCustom,
+  userId,
+  forcedCanonicalUrl,
+  usingDefaultHead,
+}: Props) => {
+  const { NEXT_PUBLIC_DEPLOY_ENV: DEPLOY_ENV } = process.env
+  const isProduction = DEPLOY_ENV === 'production'
+
+  const {
+    totalPages,
+    currentPage,
+    SEOTitle = '',
+    SEODescription = '',
+    SEOImage,
+    seoType,
+    SEOImageWidth,
+    SEOImageHeight,
+    customMetaData = [],
+    isIndexable = true,
+    hasNoCanonical = false,
+  } = SEOData
+  const robotIndex =
+    isIndexable && isProduction
+      ? 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1'
+      : 'noindex'
+
+  // const { locale = 'vi-VN', pathname, query } = router
+  const { NEXT_PUBLIC_BASE_API_URL } = process.env
+
+  let newPath = SEOData.canonicalUrl || pathname
+  Object.keys(query).forEach((key) => {
+    const queryItem = query[key]
+    if (queryItem && Array.isArray(queryItem)) {
+      newPath = newPath.replace(`[...${key}]`, queryItem.join('/'))
+    }
+  })
+  const sL = locale || 'en-PH' // standardized locale
+  const siteUrl =
+    siteType === 'helloSites' ? domainLocales[sL] : 'www.marrybaby.vn'
+
+  const hasSlash = newPath.endsWith('/') ? '' : '/'
+
+  let metaData: string | JSX.Element | JSX.Element[]
+  if (SEOData.apiMetaData && typeof SEOData.apiMetaData === 'string') {
+    const paginatedTitle = SEOData.apiMetaData?.match(/<title.*?>(.*)<\/title>/)
+    const paginatedNumber = ` - Page ${currentPage} of ${totalPages}`
+    const fD =
+      currentPage && currentPage !== 1 && paginatedTitle
+        ? SEOData.apiMetaData
+            .replace(
+              paginatedTitle[0],
+              paginatedTitle[0].includes('-')
+                ? paginatedTitle[0].replace('-', paginatedNumber + ' - ')
+                : `<title>${paginatedTitle[1].concat(paginatedNumber)}</title>`,
+            )
+            .replace(
+              `<link rel="canonical" href="https://${siteUrl}${newPath}${hasSlash}" />`,
+              `<link rel="canonical" href="https://${siteUrl}${newPath}${hasSlash}?page=${currentPage}" />`,
+            )
+        : SEOData.apiMetaData
+    metaData = parse(fD, { trim: true })
+    const metaDataImage = (metaData as JSX.Element[]).find(
+      (data: JSX.Element) =>
+        data.props?.property === 'og:image' ||
+        data.props?.property === 'og:image:secure_url',
+    )
+    if (!metaDataImage) {
+      const DefaultOgImage = `https://${siteUrl}/images/${locale}.png`
+      metaData = [
+        ...(metaData as JSX.Element[]),
+        <meta
+          key={'og:image'}
+          property="og:image"
+          content={SEOData.openGraph?.image || DefaultOgImage || ''}
+        />,
+        <meta
+          key={'og:image:secure_url'}
+          property="og:image:secure_url"
+          content={SEOData.openGraph?.image || DefaultOgImage}
+        />,
+        <meta
+          key={'og:image:width'}
+          property="og:image:width"
+          content={
+            (SEOData.openGraph?.imageWidth &&
+              String(SEOData.openGraph?.imageWidth)) ||
+            '1200'
+          }
+        />,
+        <meta
+          key={'og:image:height'}
+          property="og:image:height"
+          content={
+            (SEOData.openGraph?.imageHeight &&
+              String(SEOData.openGraph?.imageHeight)) ||
+            '630'
+          }
+        />,
+      ]
+    }
+  }
+
+  const defaultImage = `https://${siteUrl}/images/${locale}.png`
+
+  return (
+    <>
+      {Head && usingDefaultHead && (
+        <Head>
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          {siteType === 'marryBaby' && (
+            <link
+              href="https://fonts.googleapis.com/css2?family=Inter&family=Krub:wght@600&display=swap"
+              rel="stylesheet"
+            />
+          )}
+          {locale === 'km-KH' ? (
+            <link
+              href="https://fonts.googleapis.com/css2?family=Battambang:wght@400;700&display=swap"
+              rel="stylesheet"
+            ></link>
+          ) : locale === 'id-ID' || locale === 'ms-MY' ? (
+            <></>
+          ) : (
+            <link
+              href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
+              rel="preload"
+              as="style"
+            />
+          )}
+          <link rel="preconnect" href={NEXT_PUBLIC_BASE_API_URL} />
+          <meta charSet="UTF-8" />
+          {!isAmp && (
+            <meta
+              name="viewport"
+              content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+            />
+          )}
+          <meta name="google" content="notranslate" />
+          <meta name="robots" content={robotIndex} />
+
+          <meta property="fb:app_id" content="653713035016537" />
+          {customMetaData.map((customMeta, index) => {
+            return <meta key={index} {...customMeta} />
+          })}
+
+          <meta
+            name="theme-color"
+            content={siteType === 'helloSites' ? '#2c87f3' : '#e85388'}
+          />
+          <meta name="page_type" content="Home" />
+          <meta name="page_platform" content="WEB" />
+          <meta name="page_language" content={sL} />
+          <meta
+            name="ahrefs-site-verification"
+            content="46e7521a2b89a1013149c4685bbe02a1d36a4732fef98655142b829bc87cba4d"
+          />
+          {isAmp && (
+            <>
+              <script
+                async
+                custom-element="amp-analytics"
+                src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
+              ></script>
+              <script
+                async
+                custom-element="amp-fx-collection"
+                src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"
+              ></script>
+              <script
+                async
+                custom-element="amp-ad"
+                src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
+              ></script>
+              <script
+                async
+                custom-element="amp-next-page"
+                src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"
+              ></script>
+              <script
+                async
+                custom-element="amp-sticky-ad"
+                src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"
+              ></script>
+              {/* Adding support for sharing in the bottom bar */}
+              <script
+                async
+                custom-element="amp-social-share"
+                src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"
+              ></script>
+              {/* Adding the AMP state */}
+              <script
+                async
+                custom-element="amp-bind"
+                src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
+              ></script>
+            </>
+          )}
+
+          {!metaData && (
+            <>
+              {siteType === 'helloSites' ? (
+                <title>
+                  {seoCustom
+                    ? SEOTitle
+                    : SEOTitle + ' - ' + LOCALE_SPECS[locale]?.SITE_NAME}
+                </title>
+              ) : (
+                <title>{SEOTitle}</title>
+              )}
+              {!hasNoCanonical && (
+                <link rel="canonical" href={`https://${siteUrl}${newPath}`} />
+              )}
+              <meta
+                name="description"
+                content={SEODescription || SEOData.openGraph?.description}
+              />
+              {SEOData.schemaData && (
+                <script
+                  type="application/ld+json"
+                  className="yoast-schema-graph"
+                  dangerouslySetInnerHTML={{ __html: SEOData.schemaData }}
+                ></script>
+              )}
+
+              <meta property="og:locale" content={locale} />
+              <meta property="og:type" content={seoType || 'website'} />
+              <meta
+                property="og:title"
+                content={SEOData.openGraph?.title || SEOTitle}
+              />
+              <meta
+                property="og:description"
+                content={SEOData.openGraph?.description || SEODescription}
+              />
+              <meta
+                property="og:url"
+                content={`https://${siteUrl}${newPath}`}
+              />
+              <meta property="og:site_name" content={`https://${siteUrl}`} />
+              <meta
+                property="og:image"
+                content={
+                  SEOData.openGraph?.image || SEOImage || defaultImage || ''
+                }
+              />
+              <meta
+                property="og:image:secure_url"
+                content={SEOData.openGraph?.image || SEOImage || defaultImage}
+              />
+              <meta
+                property="og:image:width"
+                content={
+                  (SEOData.openGraph?.imageWidth &&
+                    String(SEOData.openGraph?.imageWidth)) ||
+                  (SEOImageWidth && String(SEOImageWidth)) ||
+                  '1200'
+                }
+              />
+              <meta
+                property="og:image:height"
+                content={
+                  (SEOData.openGraph?.imageHeight &&
+                    String(SEOData.openGraph?.imageHeight)) ||
+                  (SEOImageHeight && String(SEOImageHeight)) ||
+                  '630'
+                }
+              />
+
+              <meta name="twitter:card" content="summary_large_image" />
+              <meta
+                name="twitter:title"
+                content={SEOData.twitter?.title || SEOTitle}
+              />
+              <meta name="twitter:description" content={SEODescription} />
+              <meta
+                name="twitter:image"
+                content={SEOData.twitter?.image || SEOImage}
+              />
+            </>
+          )}
+
+          {(siteType === 'helloSites'
+            ? FAVICONS[sL] || []
+            : FAVICONS.marryBaby
+          ).map((item, index) => {
+            if (item.type === 'link') {
+              return (
+                <link
+                  key={`favicon-${index}`}
+                  rel={item.rel}
+                  href={item.href}
+                  sizes={item.sizes}
+                />
+              )
+            }
+            if (item.type === 'meta') {
+              return (
+                <meta key={index} name={item.name} content={item.content} />
+              )
+            }
+            return null
+          })}
+
+          {Array.isArray(metaData) && !!forcedCanonicalUrl
+            ? metaData.filter(
+                (d) =>
+                  d.props.name !== 'canonical' && d.props.rel !== 'canonical',
+              )
+            : metaData}
+          {forcedCanonicalUrl && (
+            <link rel="canonical" href={forcedCanonicalUrl} />
+          )}
+          {!SEOData.hasNoAmp && locale !== 'vi-VN' && (
+            <link
+              rel="amphtml"
+              href={`https://${siteUrl}${newPath}${hasSlash}?amp=1`}
+            />
+          )}
+          {userId && typeof window !== 'undefined' ? (
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `window.dataLayer = window.dataLayer || []; window.dataLayer.push({'userID': '${userId}'});`,
+              }}
+            ></script>
+          ) : null}
+        </Head>
+      )}
+      {Head && !usingDefaultHead && (
+        <Head>{/* To inject NextHead from outside */}</Head>
+      )}
+      {children}
+    </>
+  )
+}
+
+export { Layout }

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

@@ -0,0 +1,86 @@
+import React from 'react'
+
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+const Heading = ({
+  type,
+  ...elementProps
+}: {
+  type: string
+  [elementProps: string]: string | JSX.Element | JSX.Element[] | React.ReactNode
+}) => {
+  return React.createElement(type, elementProps)
+}
+
+export const StyledHeading = styled(Heading)`
+  color: var(--text-color, ${(props: ThemeProps) => props.theme.mbColors.dark});
+  font-family: Krub;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+
+  &[data-type='headline-1'] {
+    font-size: 40px;
+    line-height: 60px;
+  }
+  &[data-type='headline-2'] {
+    font-size: 32px;
+    line-height: 48px;
+  }
+  &[data-type='headline-3'] {
+    font-size: 24px;
+    line-height: 40px;
+  }
+  &[data-type='headline-4'] {
+    font-size: 18px;
+    line-height: 32px;
+  }
+`
+
+export const StyledText = styled.p`
+  color: var(--text-color, ${(props: ThemeProps) => props.theme.mbColors.dark});
+  letter-spacing: -0.2px;
+
+  &[data-type='subtitle-1'] {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 26px;
+  }
+  &[data-type='subtitle-2'] {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  &[data-type='subtitle-3'] {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  &[data-type='bodytext-1'] {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 28px;
+  }
+  &[data-type='bodytext-2'] {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  &[data-type='bodytext-3'] {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  &[data-type='caption-1'] {
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: -0.1px;
+    line-height: 14px;
+  }
+  &[data-type='caption-2'] {
+    font-size: 10px;
+    font-weight: 400;
+    letter-spacing: -0.1px;
+    line-height: 14px;
+  }
+`

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

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { CSSProperties } from 'styled-components'
+
+import { StyledHeading, StyledText } from './index.styled'
+
+type HeadingProps = {
+  type: 'h1' | 'h2' | 'h3' | 'h4'
+  color?: string
+  style?: CSSProperties
+  [x: string]: string | JSX.Element | JSX.Element[] | React.ReactNode
+}
+
+const MarryBabyHeading = ({ type, color, style, ...props }: HeadingProps) => {
+  const DATATYPE = {
+    h1: 'headline-1',
+    h2: 'headline-2',
+    h3: 'headline-3',
+    h4: 'headline-4',
+  }
+
+  return (
+    <StyledHeading
+      type={type}
+      data-type={DATATYPE[type]}
+      style={{ ...(color && { '--text-color': color }), ...style }}
+      {...props}
+    />
+  )
+}
+
+type TextProps = {
+  type:
+    | 'subtitle-1'
+    | 'subtitle-2'
+    | 'subtitle-3'
+    | 'bodytext-1'
+    | 'bodytext-2'
+    | 'bodytext-3'
+    | 'caption-1'
+    | 'caption-2'
+  color?: string
+  style?: CSSProperties
+  [x: string]: string | JSX.Element | JSX.Element[] | React.ReactNode
+}
+
+const MarryBabyText = ({ type, color, style, ...props }: TextProps) => {
+  return (
+    <StyledText
+      data-type={type}
+      style={{ ...style, ...(color && { '--text-color': color }) }}
+      {...props}
+    />
+  )
+}
+
+export { MarryBabyHeading, MarryBabyText }