feat(WEB-93): add Header to CMS and render it in Next

app/[lang]/(live)/layout.tsx

@@ -1,8 +1,8 @@
+import AdobeScript from "@/components/Current/AdobeScript"
 import Script from "next/script"
 
 import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"
-import AdobeScript from "../AdobeScript"
 
 export const metadata: Metadata = {
   description: "New web",

app/[lang]/(live-current)/current-content-page/page.tsx

@@ -4,7 +4,8 @@ import { request } from "@/lib/request"
 import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
 
 import ContentPage from "@/components/Current/ContentPage"
-import Tracking from "../../Tracking"
+import Header from "@/components/Current/Header"
+import Tracking from "@/components/Current/Tracking"
 
 import type { PageArgs, LangParams, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
@@ -43,11 +44,8 @@ export default async function CurrentContentPage({
 
     return (
       <>
-        <ContentPage
-          data={response.data}
-          uri={searchParams.uri}
-          lang={params.lang}
-        />
+        <Header lang={params.lang} />
+        <ContentPage data={response.data} />
         <Tracking pageData={trackingData} />
       </>
     )

app/[lang]/(preview)/layout.tsx

@@ -1,6 +1,7 @@
+import InitLivePreview from "@/components/Current/LivePreview"
+
 import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"
-import InitLivePreview from "@/components/Current/LivePreview"
 
 export const metadata: Metadata = {
   description: "New web",

app/[lang]/AdobeScript.tsx

@@ -1,23 +0,0 @@
-import { env } from "@/env/server"
-
-import Script from "next/script"
-
-const scriptScrs = {
-  // TODO: decide on naming and environments (development vs. test vs. staging etc)
-  development: "",
-  test: "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-84c70d82a50c-staging.min.js",
-  production:
-    "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-e56085bbe998.min.js",
-}
-
-export default function AdobeScript() {
-  return (
-    <>
-      <Script
-        strategy="beforeInteractive"
-        id="ensure-datalayer"
-      >{`window.datalayer = window.datalayer || {}`}</Script>
-      <Script src={scriptScrs[env.NODE_ENV]} />
-    </>
-  )
-}

app/[lang]/Tracking.tsx

@@ -1,85 +0,0 @@
-"use client"
-
-import {
-  SiteSectionObject,
-  TrackingData,
-  TrackingProps,
-} from "@/types/components/tracking"
-import { usePathname, useSearchParams } from "next/navigation"
-import { useEffect } from "react"
-
-function createPageObject(trackingData: TrackingData) {
-  const [lang, ...segments] = trackingData.pathName
-    .split("/")
-    .filter((v: string) => v)
-
-  function getSiteSections(segments: string[]): SiteSectionObject {
-    /* 
-      Adobe expects the properties sitesection1 - sitessection6, hence the for-loop below
-      The segments ['explore-scandic', 'wifi'] should result in:
-      {
-        sitesection1: "explore-scandic",
-        sitesection2: "explore-scandic|wifi",
-        sitesection3: "explore-scandic|wifi|",
-        sitesection4: "explore-scandic|wifi||",
-        sitesection5: "explore-scandic|wifi|||",
-        sitesection6: "explore-scandic|wifi||||",
-      } 
-    */
-    const sitesections = {} as SiteSectionObject
-    for (let i = 0; i < 6; i++) {
-      const key = ("sitesection" + (i + 1)) as keyof SiteSectionObject
-
-      sitesections[key] = segments.slice(0, i + 1).join("|")
-      if (i > 0 && !segments[i]) {
-        sitesections[key] = sitesections[key].concat(
-          "|".repeat(i + 1 - segments.length)
-        )
-      }
-    }
-    return sitesections
-  }
-  const sitesections = getSiteSections(segments)
-  const { host: domain, href: pageurl } = window.location
-
-  const page_obj = {
-    pagename: trackingData.pageName,
-    pagetype: trackingData.pageType,
-    pageurl, // is window.location.href viable?
-    createDate: trackingData.createdDate,
-    publishDate: trackingData.publishedDate,
-    domain, // is window.location.host viable?
-    errorcode: null, // handle
-    querystring: trackingData.queryString || "",
-    pageid: trackingData.pageId,
-    sessionid: "<unique identifier of session>", // base on what?
-    domainlanguage: lang,
-    hotelbrand: "scandic",
-    siteversion: "new-web",
-    ...sitesections,
-  }
-  return page_obj
-}
-
-export default function Tracking({ pageData }: TrackingProps) {
-  const pathName = usePathname()
-  const queryString = useSearchParams().toString()
-
-  useEffect(() => {
-    const trackingData = { ...pageData, pathName, queryString }
-    const pageObject = createPageObject(trackingData)
-
-    window.datalayer.page = pageObject
-
-    // NOTE: Is this irrelevant för drop 1?
-    // var user_obj = {
-    //   loginstatus: "<if the user is logged in or not>",
-    //   memberid: "<unique meeting package membership id for the user>",
-    //   memberlevel: "<member level of user>",
-    // }
-
-    // datalayer.user = user_obj;
-  }, [pathName, queryString, pageData])
-
-  return null
-}