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

2024-02-20 09:07:17 +01:00
parent 58b82cc8b7
commit cbb53df67c
30 changed files with 612 additions and 53 deletions
@@ -0,0 +1,85 @@
+"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
+}