Merged in feat/sw-3415-set-up-cookiebot-in-partner-sas (pull request #2784)

feat(SW-3415): Add CookieBotConsent to partner-sas

* Add CookieBotConsent


Approved-by: Joakim Jäderberg

apps/partner-sas/app/[lang]/layout.tsx

@@ -4,6 +4,8 @@ import "@scandic-hotels/design-system/normalize.css"
 import "@scandic-hotels/design-system/design-system-new-deprecated.css"
 import "../../globals.css"
 
+import Script from "next/script"
+
 import { BookingFlowContextProvider } from "@scandic-hotels/booking-flow/BookingFlowContextProvider"
 import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider"
 import { NuqsAdapter } from "@scandic-hotels/booking-flow/utils/nuqs"
@@ -11,6 +13,7 @@ import { Lang } from "@scandic-hotels/common/constants/language"
 import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
 import { TrpcProvider } from "@scandic-hotels/trpc/Provider"
 
+import CookieBotConsent from "@/components/CookieBotConsent"
 import { RACRouterProvider } from "@/components/RACRouterProvider"
 import { SiteWideAlert } from "@/components/SitewideAlert"
 import { FontPreload } from "@/fonts/font-preloading"
@@ -102,6 +105,7 @@ export default async function RootLayout(props: RootLayoutProps) {
                       <main>{children}</main>
                       <Footer />
                       <ToastHandler />
+                      <CookieBotConsent />
                     </BookingFlowTrackingProvider>
                   </BookingFlowContextProvider>
                 </RACRouterProvider>
@@ -109,6 +113,16 @@ export default async function RootLayout(props: RootLayoutProps) {
             </NuqsAdapter>
           </ClientIntlProvider>
         </div>
+
+        <Script
+          strategy="beforeInteractive"
+          data-blockingmode="auto"
+          data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
+          data-culture={params.lang}
+          id="Cookiebot"
+          src="https://consent.cookiebot.com/uc.js"
+          async={true}
+        />
       </body>
     </html>
   )

apps/partner-sas/components/CookieBotConsent.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+
+import { logger } from "@scandic-hotels/common/logger"
+
+export default function CookieBotConsent() {
+  const CookiebotCallbackOnAccept = useCallback(() => {
+    if (window.Cookiebot?.changed && window.adobe) {
+      const cookie = window._satellite?.cookie?.get("CookieConsent")
+
+      if (cookie?.includes("statistics:true")) {
+        window.adobe.optIn.approve(window.adobe.OptInCategories.ANALYTICS, true)
+      } else {
+        window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
+      }
+      window.adobe.optIn.complete()
+      logger.warn("window.load event explicitly dispatched.")
+      window.dispatchEvent(new Event("load"))
+    }
+  }, [])
+
+  function CookebotCallbackOnDecline() {
+    if (window.Cookiebot?.changed && window.adobe) {
+      window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
+    }
+  }
+
+  useEffect(() => {
+    // handle consent
+    window.addEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
+    window.addEventListener("CookiebotOnDecline", CookebotCallbackOnDecline)
+
+    return () => {
+      window.removeEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
+      window.removeEventListener(
+        "CookiebotOnDecline",
+        CookebotCallbackOnDecline
+      )
+    }
+  }, [CookiebotCallbackOnAccept])
+
+  return null
+}

apps/partner-sas/types/window.d.ts

@@ -0,0 +1,20 @@
+interface Window {
+  dataLayer: {
+    [key: string]: any
+    push: (...args: unknown) => void
+  }
+  adobeDataLayer: {
+    push: (...args: unknown) => void
+  }
+  _satellite: { cookie: { get: (s: string) => string } }
+  adobe: {
+    OptInCategories: { ANALYTICS: string }
+    optIn: {
+      approve: (s: string, b: boolean) => {}
+      deny: (s: string, b: boolean) => {}
+      complete: () => {}
+    }
+  }
+  Cookiebot: { changed: boolean; consented: boolean }
+  ApplePaySession: (() => void) | undefined
+}