Merge pull request #305 from illacloud/feat/update-utm

feat: add to ai utm, github add utm params

src/components/home/Content/CardContent/CardContentItem/index.js

@@ -4,6 +4,7 @@ import LearnMore from '../../LearnMore'
 import clsx from 'clsx'
 import { InfoContext } from '@/context'
 import { useContext } from 'react'
+import { useUtmParams } from '@/hooks/useUtmParams'
 
 const CardContentItem = ({
   imageSrc,
@@ -15,6 +16,7 @@ const CardContentItem = ({
   reverse,
 }) => {
   const { t } = useTranslation('home')
+  const utmUrl = useUtmParams(moreHref)
   const info = useContext(InfoContext)
   return (
     <div className={style.borderStyle}>
@@ -33,7 +35,7 @@ const CardContentItem = ({
             <span>{t(title)}</span>
           </h2>
           <span className={style.textDescStyle}>{t(desc)}</span>
-          <LearnMore title={t(moreTitle)} href={moreHref ?? ''} />
+          <LearnMore title={t(moreTitle)} href={utmUrl ?? ''} />
         </div>
       </div>
     </div>

src/components/home/Content/MoreTemplate/index.js

@@ -3,6 +3,7 @@ import style from './index.module.css'
 import LearnMore from '../LearnMore'
 import { useContext } from 'react'
 import { InfoContext } from '@/context'
+import { useUtmParams } from '@/hooks/useUtmParams'
 
 const MORE_TEMPLATE_CONTENT = {
   title: 'template.title.quickly_start_from_a',
@@ -42,47 +43,52 @@ const MORE_TEMPLATE_CONTENT = {
   ],
 }
 
+const MoeTemplateItem = ({ content, isMobile }) => {
+  const {
+    templateDesc,
+    templateMoreHref,
+    templateMoreTitle,
+    templateSrc,
+    templateTitle,
+    mobileTemplateSrc,
+  } = content
+  const { t } = useTranslation('home')
+  const utmTemplateDetailUrl = useUtmParams(templateMoreHref)
+  return (
+    <div key={templateTitle} className={style.templateItemStyle}>
+      <img
+        src={isMobile ? mobileTemplateSrc : templateSrc}
+        className="w-full"
+        alt=""
+      />
+      <div className={style.templateTextStyle}>
+        <h2 className={style.templateTextTitleStyle}>{t(templateTitle)}</h2>
+        <p className={style.templateTextDescStyle}>{t(templateDesc)}</p>
+        <LearnMore href={utmTemplateDetailUrl} title={t(templateMoreTitle)} />
+      </div>
+    </div>
+  )
+}
+
 const MoreTemplate = () => {
   const { t } = useTranslation('home')
   const info = useContext(InfoContext)
+  const utmMoreUrl = useUtmParams(MORE_TEMPLATE_CONTENT.href)
+
   return (
     <div className={style.templateContainerStyle}>
       <div className={style.templateHeadContainerStyle}>
         <h1>{t(MORE_TEMPLATE_CONTENT.title)}</h1>
-        <LearnMore
-          href={MORE_TEMPLATE_CONTENT.href}
-          title={MORE_TEMPLATE_CONTENT.moreTitle}
-        />
+        <LearnMore href={utmMoreUrl} title={MORE_TEMPLATE_CONTENT.moreTitle} />
       </div>
       <div className={style.templateItemContainerStyle}>
-        {MORE_TEMPLATE_CONTENT.items.map(
-          ({
-            templateDesc,
-            templateMoreHref,
-            templateMoreTitle,
-            templateSrc,
-            templateTitle,
-            mobileTemplateSrc,
-          }) => (
-            <div key={templateTitle} className={style.templateItemStyle}>
-              <img
-                src={info?.isMobile ? mobileTemplateSrc : templateSrc}
-                className="w-full"
-                alt=""
-              />
-              <div className={style.templateTextStyle}>
-                <h2 className={style.templateTextTitleStyle}>
-                  {t(templateTitle)}
-                </h2>
-                <p className={style.templateTextDescStyle}>{t(templateDesc)}</p>
-                <LearnMore
-                  href={templateMoreHref}
-                  title={t(templateMoreTitle)}
-                />
-              </div>
-            </div>
-          ),
-        )}
+        {MORE_TEMPLATE_CONTENT.items.map((content) => (
+          <MoeTemplateItem
+            key={content.templateTitle}
+            content={content}
+            isMobile={info?.isMobile}
+          />
+        ))}
       </div>
     </div>
   )

src/constants/utmKeys.js

@@ -0,0 +1 @@
+export const keys = ['utm_source', 'utm_medium', 'utm_campaign']

src/hooks/useUtmParams.js

@@ -1,12 +1,15 @@
 import { useRouter } from 'next/router'
 import { addParams } from '@/utils/addParams'
+import { keys } from '@/constants/utmKeys'
 export const useUtmParams = (url) => {
   const router = useRouter()
-  const keys = ['utm_source', 'utm_medium', 'utm_campaign']
-  if (router?.query && Object.keys(router?.query).some(key => keys.includes(key))) {
+  if (
+    router?.query &&
+    Object.keys(router?.query).some((key) => keys.includes(key))
+  ) {
     const { utm_source, utm_medium, utm_campaign } = router.query
     return addParams(url, { utm_source, utm_medium, utm_campaign })
   } else {
     return url
   }
-}
+}

src/pages/[pageName].js

@@ -95,7 +95,7 @@ const LandingPageIndex = ({ pageName, uri, isMobile }) => {
     </>
   )
 }
-export const getServerSideProps = async ({ locale, params, req }) => {
+export const getServerSideProps = async ({ locale, params, req, query }) => {
   const { pageName } = params
   if (!pageMap[pageName]) {
     return {
@@ -105,7 +105,7 @@ export const getServerSideProps = async ({ locale, params, req }) => {
       },
     }
   }
-  const uri = await getGithubOauth()
+  const uri = await getGithubOauth(query)
 
   return {
     props: {

src/pages/[pageName]/[name].js

@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import Nav from '@/components/common/Nav'
 import Footer from '@/components/common/Footer'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Head from 'next/head'
 import { useTranslation } from 'next-i18next'
-import { BookDemo } from '@/components/home/Form/BookDemo'
 import style from '@/components/LandingPage/index.module.css'
 import { LpHeader } from '@/components/LandingPage/LpHeader'
 import { LpTemplate } from '@/components/LandingPage/LpTemplate'
@@ -85,7 +84,7 @@ const LandingPageSecond = ({ pageName, name, locale, uri, isMobile }) => {
     </>
   )
 }
-export const getServerSideProps = async ({ locale, params, req }) => {
+export const getServerSideProps = async ({ locale, params, req, query }) => {
   const { pageName, name } = params
   if (!pageMap[pageName]) {
     return {
@@ -95,7 +94,7 @@ export const getServerSideProps = async ({ locale, params, req }) => {
       },
     }
   }
-  const uri = await getGithubOauth()
+  const uri = await getGithubOauth(query)
   return {
     props: {
       ...(await serverSideTranslations(locale, [

src/pages/illa-self-host.js

@@ -43,8 +43,8 @@ const Cloud = ({ uri, isMobile }) => {
     </>
   )
 }
-export const getServerSideProps = async ({ locale, req }) => {
-  const uri = await getGithubOauth()
+export const getServerSideProps = async ({ locale, req, query }) => {
+  const uri = await getGithubOauth(query)
   return {
     props: {
       ...(await serverSideTranslations(locale, [

src/pages/illacloud.js

@@ -47,8 +47,8 @@ const Cloud = ({ uri, isMobile }) => {
   )
 }
 
-export const getServerSideProps = async ({ locale, req }) => {
-  const uri = await getGithubOauth()
+export const getServerSideProps = async ({ locale, req, query }) => {
+  const uri = await getGithubOauth(query)
   return {
     props: {
       ...(await serverSideTranslations(locale, [

src/pages/illadrive.js

@@ -46,8 +46,8 @@ const Drive = ({ uri, isMobile }) => {
     </>
   )
 }
-export const getServerSideProps = async ({ locale, req }) => {
-  const uri = await getGithubOauth()
+export const getServerSideProps = async ({ locale, req, query }) => {
+  const uri = await getGithubOauth(query)
   return {
     props: {
       ...(await serverSideTranslations(locale, ['drive', 'home', 'common'])),

src/pages/index.js

@@ -48,22 +48,7 @@ const Home = ({ starCounts, uri, isMobile }) => {
       <InfoProvider isMobile={isMobile}>
         <div className="bg-black overflow-visible w-full relative z-[1]">
           <Nav whiteTheme={false} />
-          {/* <Script>
-            {`(function (d, t) {
-            var BASE_URL = "https://app.chatwoot.com";
-            var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
-            g.src = BASE_URL + "/packs/js/sdk.js";
-            g.defer = true;
-            g.async = true;
-            s.parentNode.insertBefore(g, s);
-            g.onload = function () {
-              window.chatwootSDK.run({
-                websiteToken: 'ECxzx85niyQqKpnUytwMjpUM',
-                baseUrl: BASE_URL
-              })
-            }
-          })(document, "script");`}
-          </Script> */}
+
           <Banner
             setPlayMaskShow={setPlayMaskShow}
             githubStarts={Math.floor(starCounts * step)}
@@ -82,9 +67,9 @@ const Home = ({ starCounts, uri, isMobile }) => {
 }
 
 export const getServerSideProps = async (ctx) => {
-  const { locale, req } = ctx
+  const { locale, req, query } = ctx
   const starCounts = await getStars()
-  const uri = await getGithubOauth()
+  const uri = await getGithubOauth(query)
   return {
     props: {
       ...(await serverSideTranslations(locale, ['home', 'common'])),

src/utils/getGithubOauth.js

@@ -1,11 +1,21 @@
-export const getGithubOauth = async () => {
+import { keys } from '@/constants/utmKeys'
+
+export const getGithubOauth = async (query) => {
   try {
+    const redirectURI = new URL('https://cloud.illacloud.com/oauth')
+    Object.keys(query).forEach((key) => {
+      if (keys.includes(key)) {
+        redirectURI.searchParams.append(key, query[key])
+      }
+    })
     const res = await fetch(
-      'https://cloud-api.illacloud.com/supervisor/api/v1/oauth/github/uri/redirectTo/https%3A%2F%2Fcloud.illacloud.com%2Foauth/landing/signup'
+      `https://cloud-api.illacloud.com/supervisor/api/v1/oauth/github/uri/redirectTo/${encodeURIComponent(
+        redirectURI.toString(),
+      )}/landing/signup`,
     )
     const resJSON = await res.json()
     return resJSON.uri
   } catch (e) {
     return ''
   }
-}
+}