From 666e62c85103cf0c673c2c44f415f263eb5c8c7e Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Mon, 12 Feb 2024 13:16:05 +0100
Subject: [PATCH] fix: ensure window.datalayer access in client only

---
 app/[lang]/(live)/layout.tsx | 26 +++++++++++++++++---------
 app/[lang]/Tracking.tsx      | 29 +++++++++++++++--------------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index 57bc88523..e2c59e1a8 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -1,13 +1,13 @@
-import "../../core.css";
-import "../../scandic.css";
+import "../../core.css"
+import "../../scandic.css"
 
-import Footer from "@/components/Current/Footer";
-import LangPopup from "@/components/Current/LangPopup";
-import Script from "next/script";
-import SkipToMainContent from "@/components/SkipToMainContent";
+import Footer from "@/components/Current/Footer"
+import LangPopup from "@/components/Current/LangPopup"
+import Script from "next/script"
+import SkipToMainContent from "@/components/SkipToMainContent"
 
-import type { Metadata } from "next";
-import type { LangParams, LayoutArgs } from "@/types/params";
+import type { Metadata } from "next"
+import type { LangParams, LayoutArgs } from "@/types/params"
 import { env } from "@/env/server.mjs"
 export const metadata: Metadata = {
   description: "New web",
@@ -15,6 +15,7 @@ export const metadata: Metadata = {
 }
 
 const adobeSrcs = {
+  // TODO: decide on naming and environments
   development: "",
   test: "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-84c70d82a50c-staging.min.js",
   production:
@@ -72,7 +73,14 @@ export default function RootLayout({
           `}
         </Script> */}
         {/* TODO: Ensure order (datalayer created before script is executed!) */}
+        {/* Should this be moved to an app/layout instead? */}
+        <Script id={"before"}>{`
+        console.log('before script load')
+        `}</Script>
         <Script src={adobeSrcs[env.NODE_ENV]} />
+        <Script id="after">{`
+        console.log('after script load')
+        `}</Script>
         {/* <Script
           data-cookieconsent="ignore"
           src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"
@@ -86,5 +94,5 @@ export default function RootLayout({
         <Footer lang={params.lang} />
       </body>
     </html>
-  );
+  )
 }
diff --git a/app/[lang]/Tracking.tsx b/app/[lang]/Tracking.tsx
index 4d6c08d0f..80cb0cdbb 100644
--- a/app/[lang]/Tracking.tsx
+++ b/app/[lang]/Tracking.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { usePathname, useSearchParams } from "next/navigation"
-import Script from "next/script"
 
 type WindowWithDataLayer = Window & {
   datalayer: { [key: string]: any }
@@ -50,15 +49,17 @@ function createPageObject(pathName: string, queryString?: string) {
 }
 
 export default function Tracking() {
-  console.log("create datalayer 🚀")
-
-  if (!window.datalayer) {
-    window.datalayer = {}
-  }
-
   const pathName = usePathname()
   const queryString = useSearchParams().toString()
 
+  if (typeof window === "undefined") {
+    return null
+  }
+  if (!window.datalayer) {
+    console.log("creating datalayer 🧑‍🔧")
+    window.datalayer = {}
+  }
+
   const pageObject = createPageObject(pathName, queryString)
 
   if (window.datalayer) {
@@ -72,12 +73,12 @@ export default function Tracking() {
     // }
 
     // datalayer.user = user_obj;
+    console.log("🤖 datalayer: ", window.datalayer)
   }
-  return (
-    <>
-      <Script id="page-tracking">{`
-      console.log('hello')
-      `}</Script>
-    </>
-  )
+  return null
+  // <>
+  //   <Script id="page-tracking">{`
+  //   console.log('hello')
+  //   `}</Script>
+  // </>
 }