From 038211bf091ee0fc43d5363c459deebc7fe1467e Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 16 Oct 2025 12:54:03 +0000
Subject: [PATCH] feat(BOOK-450): Added theme to hotel page only, reverting
 previous theme handing on the body tag

Approved-by: Linus Flood
---
 .../hotel_page/[uid]/page.module.css          |  2 +-
 .../(contentTypes)/hotel_page/[uid]/page.tsx  | 21 +++++-
 .../(contentTypes)/hotel_page/[uid]/page.tsx  | 10 ---
 .../[lang]/(live)/@theme/[...path]/page.tsx   |  1 -
 .../app/[lang]/(live)/@theme/page.tsx         |  6 --
 apps/scandic-web/app/[lang]/(live)/layout.tsx |  8 +--
 .../components/ThemeUpdater/index.tsx         | 18 -----
 apps/scandic-web/utils/theme/index.ts         | 44 ++++++------
 apps/scandic-web/utils/theme/utils.ts         | 67 -------------------
 9 files changed, 45 insertions(+), 132 deletions(-)
 delete mode 100644 apps/scandic-web/app/[lang]/(live)/@theme/(contentTypes)/hotel_page/[uid]/page.tsx
 delete mode 100644 apps/scandic-web/app/[lang]/(live)/@theme/[...path]/page.tsx
 delete mode 100644 apps/scandic-web/app/[lang]/(live)/@theme/page.tsx
 delete mode 100644 apps/scandic-web/components/ThemeUpdater/index.tsx
 delete mode 100644 apps/scandic-web/utils/theme/utils.ts

diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.module.css b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.module.css
index 86b95c989..5c941bca7 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.module.css
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.module.css
@@ -1,3 +1,3 @@
-.page {
+.hotelPage {
   background-color: var(--Background-Primary);
 }
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx
index 26faa6a3d..13acdca2d 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx
@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import { notFound } from "next/navigation"
 
 import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
@@ -5,6 +6,7 @@ import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
 import HotelMapPage from "@/components/ContentType/HotelMapPage"
 import HotelPage from "@/components/ContentType/HotelPage"
 import HotelSubpage from "@/components/ContentType/HotelSubpage"
+import { getThemeByHotel } from "@/utils/theme"
 
 import styles from "./page.module.css"
 
@@ -33,13 +35,26 @@ export default async function HotelPagePage(
     return notFound()
   }
 
+  const hotelTheme = getThemeByHotel(
+    hotelPageData.hotel_page_id,
+    hotelData.hotel.hotelType
+  )
+
   if (searchParams.subpage) {
-    return <HotelSubpage hotelData={hotelData} subpage={searchParams.subpage} />
+    return (
+      <div className={hotelTheme}>
+        <HotelSubpage hotelData={hotelData} subpage={searchParams.subpage} />
+      </div>
+    )
   } else if (searchParams.view === "map") {
-    return <HotelMapPage hotelData={hotelData} />
+    return (
+      <div className={hotelTheme}>
+        <HotelMapPage hotelData={hotelData} />
+      </div>
+    )
   } else {
     return (
-      <div className={styles.page}>
+      <div className={cx(styles.hotelPage, hotelTheme)}>
         <HotelPage hotelData={hotelData} hotelPageData={hotelPageData} />
       </div>
     )
diff --git a/apps/scandic-web/app/[lang]/(live)/@theme/(contentTypes)/hotel_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/@theme/(contentTypes)/hotel_page/[uid]/page.tsx
deleted file mode 100644
index 16a090414..000000000
--- a/apps/scandic-web/app/[lang]/(live)/@theme/(contentTypes)/hotel_page/[uid]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import ThemeUpdater from "@/components/ThemeUpdater"
-import { getLang } from "@/i18n/serverContext"
-import { getHotelTheme } from "@/utils/theme/utils"
-
-export default async function ThemeHotelPage() {
-  const lang = await getLang()
-  const hotelTheme = await getHotelTheme(lang)
-
-  return <ThemeUpdater theme={hotelTheme} />
-}
diff --git a/apps/scandic-web/app/[lang]/(live)/@theme/[...path]/page.tsx b/apps/scandic-web/app/[lang]/(live)/@theme/[...path]/page.tsx
deleted file mode 100644
index 03a82e5f5..000000000
--- a/apps/scandic-web/app/[lang]/(live)/@theme/[...path]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../page"
diff --git a/apps/scandic-web/app/[lang]/(live)/@theme/page.tsx b/apps/scandic-web/app/[lang]/(live)/@theme/page.tsx
deleted file mode 100644
index 49e83007f..000000000
--- a/apps/scandic-web/app/[lang]/(live)/@theme/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import ThemeUpdater from "@/components/ThemeUpdater"
-import { DEFAULT_THEME } from "@/utils/theme/types"
-
-export default function ThemePage() {
-  return <ThemeUpdater theme={DEFAULT_THEME} />
-}
diff --git a/apps/scandic-web/app/[lang]/(live)/layout.tsx b/apps/scandic-web/app/[lang]/(live)/layout.tsx
index c53975af1..46daebf73 100644
--- a/apps/scandic-web/app/[lang]/(live)/layout.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/layout.tsx
@@ -34,7 +34,6 @@ import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
-import { getThemeClass } from "@/utils/theme"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
@@ -42,17 +41,15 @@ export default async function RootLayout(
   props: React.PropsWithChildren<
     LayoutArgs<LangParams> & {
       bookingwidget: React.ReactNode
-      theme: React.ReactNode
     }
   >
 ) {
   const params = await props.params
 
-  const { bookingwidget, theme, children } = props
+  const { bookingwidget, children } = props
 
   setLang(params.lang)
   const messages = await getMessages(params.lang)
-  const themeClass = await getThemeClass(params.lang)
 
   return (
     <html lang={params.lang}>
@@ -67,7 +64,7 @@ export default async function RootLayout(
           window.dataLayer = window.dataLayer || []
         `}</Script>
       </head>
-      <body className={themeClass}>
+      <body className="scandic">
         <div className="root">
           <SessionProvider basePath="/api/web/auth">
             <ClientIntlProvider
@@ -75,7 +72,6 @@ export default async function RootLayout(
               locale={params.lang}
               messages={messages}
             >
-              {theme}
               <NuqsAdapter>
                 <TrpcProvider>
                   <RACRouterProvider>
diff --git a/apps/scandic-web/components/ThemeUpdater/index.tsx b/apps/scandic-web/components/ThemeUpdater/index.tsx
deleted file mode 100644
index 404f1f5b6..000000000
--- a/apps/scandic-web/components/ThemeUpdater/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client"
-
-import { useEffect } from "react"
-
-import { type Theme, THEMES } from "@/utils/theme/types"
-
-interface ThemeUpdaterProps {
-  theme: Theme
-}
-
-export default function ThemeUpdater({ theme }: ThemeUpdaterProps) {
-  useEffect(() => {
-    document.body.classList.remove(...THEMES)
-    document.body.classList.add(theme)
-  }, [theme])
-
-  return null
-}
diff --git a/apps/scandic-web/utils/theme/index.ts b/apps/scandic-web/utils/theme/index.ts
index 3ee4f77ce..3d3491abc 100644
--- a/apps/scandic-web/utils/theme/index.ts
+++ b/apps/scandic-web/utils/theme/index.ts
@@ -1,27 +1,31 @@
-import { headers } from "next/headers"
+import { SignatureHotelEnum } from "@scandic-hotels/common/constants/signatureHotels"
+import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
 
-import { PageContentTypeEnum } from "@scandic-hotels/trpc/enums/contentType"
+import { DEFAULT_THEME, Theme } from "./types"
 
-import { env } from "@/env/server"
-
-import { DEFAULT_THEME } from "./types"
-import { getHotelTheme } from "./utils"
-
-import type { Lang } from "@scandic-hotels/common/constants/language"
-
-export async function getThemeClass(lang: Lang): Promise<string> {
-  if (!env.HOTEL_BRANDING) {
-    return DEFAULT_THEME
+function getSignatureHotelTheme(hotelId: string) {
+  switch (hotelId) {
+    case SignatureHotelEnum.Haymarket:
+      return Theme.haymarket
+    case SignatureHotelEnum.HotelNorge:
+      return Theme.hotelNorge
+    case SignatureHotelEnum.DowntownCamper:
+      return Theme.downtownCamper
+    case SignatureHotelEnum.GrandHotelOslo:
+      return Theme.grandHotel
+    case SignatureHotelEnum.Marski:
+      return Theme.marski
+    default:
+      return Theme.scandic
   }
+}
 
-  const headersList = await headers()
-  const contentType = headersList.get("x-contenttype") || ""
-
-  const isHotelPage =
-    contentType && contentType === PageContentTypeEnum.hotelPage
-
-  if (isHotelPage) {
-    return await getHotelTheme(lang)
+export function getThemeByHotel(hotelId: string, hotelType: string) {
+  if (hotelType === HotelTypeEnum.ScandicGo) {
+    return Theme.scandicGo
+  }
+  if (hotelType === HotelTypeEnum.Signature) {
+    return getSignatureHotelTheme(hotelId)
   }
 
   return DEFAULT_THEME
diff --git a/apps/scandic-web/utils/theme/utils.ts b/apps/scandic-web/utils/theme/utils.ts
deleted file mode 100644
index 6a9d95b2f..000000000
--- a/apps/scandic-web/utils/theme/utils.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { SignatureHotelEnum } from "@scandic-hotels/common/constants/signatureHotels"
-import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
-
-import { env } from "@/env/server"
-import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
-
-import { DEFAULT_THEME, Theme } from "./types"
-
-import type { Lang } from "@scandic-hotels/common/constants/language"
-
-function getSignatureHotelTheme(hotelId: string) {
-  switch (hotelId) {
-    case SignatureHotelEnum.Haymarket:
-      return Theme.haymarket
-    case SignatureHotelEnum.HotelNorge:
-      return Theme.hotelNorge
-    case SignatureHotelEnum.DowntownCamper:
-      return Theme.downtownCamper
-    case SignatureHotelEnum.GrandHotelOslo:
-      return Theme.grandHotel
-    case SignatureHotelEnum.Marski:
-      return Theme.marski
-    default:
-      return Theme.scandic
-  }
-}
-
-function getThemeByHotel(hotelId: string, hotelType: string) {
-  if (hotelType === HotelTypeEnum.ScandicGo) {
-    return Theme.scandicGo
-  }
-  if (hotelType === HotelTypeEnum.Signature) {
-    return getSignatureHotelTheme(hotelId)
-  }
-
-  return DEFAULT_THEME
-}
-
-export async function getHotelTheme(language: Lang): Promise<Theme> {
-  if (!env.HOTEL_BRANDING) {
-    return DEFAULT_THEME
-  }
-
-  try {
-    const hotelPageData = await getHotelPage()
-    if (!hotelPageData) {
-      return DEFAULT_THEME
-    }
-
-    const hotelData = await getHotel({
-      hotelId: hotelPageData.hotel_page_id,
-      isCardOnlyPayment: false,
-      language,
-    })
-
-    if (!hotelData) {
-      return DEFAULT_THEME
-    }
-
-    return getThemeByHotel(
-      hotelPageData.hotel_page_id,
-      hotelData.hotel.hotelType
-    )
-  } catch {
-    return DEFAULT_THEME
-  }
-}