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

package/src/components/molecules/seoHead/index.tsx

@@ -0,0 +1,382 @@
+import React from 'react'
+
+import {
+  domainLocales,
+  FAVICONS,
+  LOCALE_SPECS,
+} from 'components/organisms/navigationLayout/constants'
+import parse from 'html-react-parser'
+import { SiteType } from 'interfaces/types'
+import { isProduction } from 'src/interfaces/constants'
+
+// import Head from 'next/head'
+// import { useRouter } from 'next/router'
+
+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 = {
+  SEOData: SEOData
+  isAmp: boolean
+  locale: string
+  routerPathname: string
+  routerQuery: { [key: string]: string }
+  nextHead: React.FunctionComponent
+  siteType: SiteType
+  seoCustom?: boolean
+  userId?: string | number
+  forcedCanonicalUrl?: string
+}
+
+const SeoHead = ({
+  SEOData = {},
+  isAmp = false,
+  locale = 'vi-VN',
+  routerPathname: pathname,
+  routerQuery: query,
+  nextHead: Head,
+  siteType,
+  seoCustom,
+  userId,
+  forcedCanonicalUrl,
+}: Props) => {
+  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>
+      <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>
+  )
+}
+
+export { SeoHead }

package/src/components/molecules/sidemenu/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,273 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0 {
+  --menu-width: 240px;
+  --menu-spacing: 28px 16px;
+  width: var(--menu-width);
+  height: 100vh;
+  padding: var(--menu-spacing);
+  background-color: #f8f9fc;
+  -webkit-transition: ease-in-out 0.5s;
+  transition: ease-in-out 0.5s;
+}
+
+.c0[data-is-collapsed] {
+  --menu-width: 64px;
+  --menu-spacing: 28px 8px;
+}
+
+.c2[data-logo-is-light] > svg path {
+  fill: #fff;
+}
+
+.c2[data-has-badge] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c2 .amp-logo img {
+  object-fit: contain;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c1 svg {
+  -webkit-transition: 0.4s ease-in-out;
+  transition: 0.4s ease-in-out;
+}
+
+.c3 {
+  cursor: pointer;
+}
+
+.c3[data-is-collapsed] {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c5 > img,
+.c5 svg,
+.c5 picture {
+  width: 40px;
+  height: 40px;
+  margin-right: 1rem;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.c5 > figcaption p + p {
+  margin-top: 2px;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-top: 24px;
+  margin-bottom: 36px;
+}
+
+.c4 figcaption {
+  white-space: nowrap;
+}
+
+.c4[data-is-collapsed='true'] img {
+  max-width: 2rem;
+  max-height: 2rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 9px 21px;
+  margin-bottom: 4px;
+  border-radius: 6px;
+}
+
+.c6:not([data-is-link-active]) {
+  cursor: pointer;
+}
+
+.c6 p {
+  margin-left: 12px;
+}
+
+.c6[data-is-link-active] {
+  background: #2d87f3;
+}
+
+.c6[data-is-link-collapsed] {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-right: -14px;
+  margin-left: -14px;
+}
+
+@supports (display:flex; gap:1em) {
+  .c2[data-has-badge] {
+    gap: 0.5rem;
+  }
+}
+
+@supports not (display:flex; gap:1em) {
+  .c2[data-has-badge] > img,
+  .c2[data-has-badge] amp-image {
+    margin-left: 0.25rem;
+  }
+}
+
+<div
+  class="c0"
+  data-is-collapsed="true"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2"
+      data-has-badge="false"
+    >
+      <svg
+        fill="none"
+        height="57px"
+        viewBox="0 0 60 57"
+        width="60px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M24.3624 21.2581V35.6714C24.3624 36.1684 24.3022 36.6805 24.3022 37.1172C24.1366 39.9035 21.3976 42.6446 18.1017 42.5391C16.371 42.4789 15.0316 41.1987 14.9714 39.4667C14.866 37.9004 15.4229 36.6805 16.988 36.0027C17.4395 35.7768 17.6051 35.5057 17.6051 35.0539C17.5449 34.828 17.6051 34.5569 17.6051 34.331V8.23046V7.73345C17.6653 7.11595 17.4395 6.78461 16.8827 6.49846C15.0466 5.60986 14.4296 3.36579 15.4831 1.63379C16.1001 0.624714 16.988 0.0674616 18.1017 0.00721813C20.4495 -0.098208 22.2404 0.956053 23.5196 2.85372C24.0162 3.63689 24.3624 4.4803 24.3624 5.42913C24.4226 5.92614 24.4226 6.43821 24.4226 6.87498C24.3624 11.6493 24.3624 16.4537 24.3624 21.2581Z"
+          fill="#2D87F3"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M0 21.2086V6.19713C0 4.75314 0.389475 3.41444 1.3332 2.28632C2.56155 0.782162 4.16439 0 6.17168 0C7.72958 0.0601663 8.89801 0.94762 9.28749 2.45178C9.67696 3.95594 9.12271 5.52026 7.89436 6.30242C7.7895 6.40771 7.60975 6.46788 7.44497 6.52805C6.99557 6.6935 6.8308 6.97929 6.8308 7.4155V8.1375V34.3099V34.5355C6.77088 35.2575 6.93565 35.7689 7.71461 36.0998C8.98789 36.7165 9.60206 38.1154 9.43728 39.4992C9.27251 40.8981 8.32878 42.0713 7.04051 42.4022C5.99193 42.688 4.98828 42.5075 3.98463 42.1164C1.21337 41.0635 0.0449394 38.4312 0.0449394 36.4307C0.0599193 31.3617 0 26.2927 0 21.2086Z"
+          fill="#2D87F3"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M45.4031 43.478C43.8548 43.2383 43.028 43.1634 41.7202 43.0885C41.4947 43.0287 41.5548 42.879 41.3293 42.9387C40.8334 45.8892 38.9242 48.1955 36.2034 49.3035C35.0909 49.7528 33.9785 50.0824 32.806 50.247C29.6343 50.7414 26.3871 50.7414 23.2153 50.247C21.8174 50.0224 20.4343 49.6332 19.1415 48.9741C17.4127 48.0906 16.0749 46.8025 15.3534 44.9756C15.2932 44.8708 14.9025 43.3131 14.677 42.759C14.1206 41.4861 12.7228 40.7524 11.3847 41.0968C10.0468 41.4263 9.09981 42.5944 9.15994 43.9871C9.22007 44.766 9.71629 46.6528 9.77627 46.7576C10.1673 47.9257 10.7233 48.9741 11.505 49.9774C13.0082 51.9844 14.9625 53.3171 17.1873 54.3057C19.6977 55.4137 22.3734 55.9678 25.1094 56.1925C28.0707 56.4171 30.972 56.3574 33.9185 55.8033C36.2034 55.354 38.4882 54.6949 40.5477 53.5269C44.4561 51.2504 46.5758 47.8059 47.0116 43.3581C46.4706 43.5229 45.4031 43.478 45.4031 43.478Z"
+          fill="#284A75"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M53.1185 27.6617C53.0585 28.7138 52.8929 29.7208 52.6223 30.7879C52.2915 31.9001 51.7804 32.9672 51.0585 33.8539C49.4948 35.8679 47.4348 36.7546 44.9238 36.6945C41.5707 36.6344 39.2402 35.0713 37.8418 32.0053C37.3907 30.9983 37.0599 29.8861 36.9547 28.834C36.6691 26.6096 36.7291 24.3702 37.4509 22.2059C37.8418 21.1538 38.338 20.1468 39.0749 19.3052C40.9693 17.1259 43.4202 16.3443 46.277 16.7952C49.2843 17.2461 51.2389 19.0196 52.3067 21.8151C53.0733 23.6488 53.2989 25.6026 53.1185 27.6617ZM59.825 23.9343C59.494 21.3191 58.7122 18.8092 57.3138 16.5247C55.2539 13.2332 52.3519 11.0539 48.5628 10.1671C46.9991 9.77636 45.3904 9.77636 43.7663 9.83648C41.6463 9.94168 39.6314 10.5128 37.7972 11.5649C34.9552 13.1881 32.9404 15.5778 31.6623 18.5386C30.3241 21.6047 29.8279 24.8361 30.0986 28.1877C30.264 30.2016 30.5948 32.0353 31.3317 33.929C33.0608 38.3928 36.068 41.564 40.7591 42.9017C40.9245 42.9618 46.6685 43.6832 47.0592 43.3526C50.6829 42.9017 53.7503 41.3386 56.0959 38.498C57.5394 36.7696 58.5469 34.7556 59.2235 32.6364C59.9301 29.7808 60.2158 26.9402 59.825 23.9343Z"
+          fill="#2D87F3"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M44.9967 29.9921C43.1951 29.9921 41.8218 28.5838 41.8218 26.7794C41.8218 25.0335 43.2396 23.5664 44.9967 23.5664C46.7983 23.5664 48.2307 25.0335 48.2307 26.838C48.2898 28.3637 46.9755 30.0508 44.9967 29.9921Z"
+          fill="#284A75"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      class="c3"
+      data-is-collapsed="true"
+    >
+      <svg
+        data-name="Layer 1"
+        height="20px"
+        viewBox="0 0 20 20"
+        width="20px"
+      >
+        <path
+          d="M10 .75A9.25 9.25 0 1019.25 10 9.25 9.25 0 0010 .75z"
+          fill="none"
+          stroke="#d2d6dc"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          d="M11.44 6.53L8 10l3.48 3.47"
+          fill="none"
+          stroke="#737373"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c4"
+    data-is-collapsed="true"
+  >
+    <figure
+      class="c5"
+    >
+      <img
+        src="//unsplash.it/32"
+      />
+    </figure>
+  </div>
+  <div
+    class="c6"
+    data-is-link-active="true"
+    data-is-link-collapsed="true"
+  >
+    <img
+      src="//unsplash.it/16"
+    />
+  </div>
+  <div
+    class="c6"
+    data-is-link-collapsed="true"
+  >
+    <img
+      src="//unsplash.it/16"
+    />
+  </div>
+  <div
+    class="c6"
+    data-is-link-collapsed="true"
+  >
+    <img
+      src="//unsplash.it/16"
+    />
+  </div>
+</div>
+`;