scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(BOOK-450): Added theme to hotel page only, reverting previous theme handing on the body tag

Browse Source 
Approved-by: Linus Flood
This commit is contained in:
Erik Tiekstra
2025-10-16 12:54:03 +00:00
parent 338c93dd56
commit 038211bf09
9 changed files with 45 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.module.css
View File

@@ -1,3 +1,3 @@
.page { .hotelPage {
background-color: var(--Background-Primary); background-color: var(--Background-Primary);
} }

21
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx
View File

@@ -1,3 +1,4 @@
import { cx } from "class-variance-authority"
import { notFound } from "next/navigation" import { notFound } from "next/navigation"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests" 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 HotelMapPage from "@/components/ContentType/HotelMapPage"
import HotelPage from "@/components/ContentType/HotelPage" import HotelPage from "@/components/ContentType/HotelPage"
import HotelSubpage from "@/components/ContentType/HotelSubpage" import HotelSubpage from "@/components/ContentType/HotelSubpage"
import { getThemeByHotel } from "@/utils/theme"
import styles from "./page.module.css" import styles from "./page.module.css"
@@ -33,13 +35,26 @@ export default async function HotelPagePage(
return notFound() return notFound()
} }
const hotelTheme = getThemeByHotel(
hotelPageData.hotel_page_id,
hotelData.hotel.hotelType
)
if (searchParams.subpage) { 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") { } else if (searchParams.view === "map") {
return <HotelMapPage hotelData={hotelData} /> return (
<div className={hotelTheme}>
<HotelMapPage hotelData={hotelData} />
</div>
)
} else { } else {
return ( return (
<div className={styles.page}> <div className={cx(styles.hotelPage, hotelTheme)}>
<HotelPage hotelData={hotelData} hotelPageData={hotelPageData} /> <HotelPage hotelData={hotelData} hotelPageData={hotelPageData} />
</div> </div>
) )

10
apps/scandic-web/app/[lang]/(live)/@theme/(contentTypes)/hotel_page/[uid]/page.tsx
View File

@@ -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} />
}

1
apps/scandic-web/app/[lang]/(live)/@theme/[...path]/page.tsx
View File

@@ -1 +0,0 @@
export { default } from "../page"

6
apps/scandic-web/app/[lang]/(live)/@theme/page.tsx
View File

@@ -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} />
}

8
apps/scandic-web/app/[lang]/(live)/layout.tsx
View File

@@ -34,7 +34,6 @@ import { FontPreload } from "@/fonts/font-preloading"
import { getMessages } from "@/i18n" import { getMessages } from "@/i18n"
import ClientIntlProvider from "@/i18n/Provider" import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
import { getThemeClass } from "@/utils/theme"
import type { LangParams, LayoutArgs } from "@/types/params" import type { LangParams, LayoutArgs } from "@/types/params"
@@ -42,17 +41,15 @@ export default async function RootLayout(
props: React.PropsWithChildren< props: React.PropsWithChildren<
LayoutArgs<LangParams> & { LayoutArgs<LangParams> & {
bookingwidget: React.ReactNode bookingwidget: React.ReactNode
theme: React.ReactNode
} }
> >
) { ) {
const params = await props.params const params = await props.params
const { bookingwidget, theme, children } = props const { bookingwidget, children } = props
setLang(params.lang) setLang(params.lang)
const messages = await getMessages(params.lang) const messages = await getMessages(params.lang)
const themeClass = await getThemeClass(params.lang)
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
@@ -67,7 +64,7 @@ export default async function RootLayout(
window.dataLayer = window.dataLayer || [] window.dataLayer = window.dataLayer || []
`}</Script> `}</Script>
</head> </head>
<body className={themeClass}> <body className="scandic">
<div className="root"> <div className="root">
<SessionProvider basePath="/api/web/auth"> <SessionProvider basePath="/api/web/auth">
<ClientIntlProvider <ClientIntlProvider
@@ -75,7 +72,6 @@ export default async function RootLayout(
locale={params.lang} locale={params.lang}
messages={messages} messages={messages}
> >
{theme}
<NuqsAdapter> <NuqsAdapter>
<TrpcProvider> <TrpcProvider>
<RACRouterProvider> <RACRouterProvider>

18
apps/scandic-web/components/ThemeUpdater/index.tsx
View File

@@ -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
}

44
apps/scandic-web/utils/theme/index.ts
View File

@@ -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" function getSignatureHotelTheme(hotelId: string) {
switch (hotelId) {
import { DEFAULT_THEME } from "./types" case SignatureHotelEnum.Haymarket:
import { getHotelTheme } from "./utils" return Theme.haymarket
case SignatureHotelEnum.HotelNorge:
import type { Lang } from "@scandic-hotels/common/constants/language" return Theme.hotelNorge
case SignatureHotelEnum.DowntownCamper:
export async function getThemeClass(lang: Lang): Promise<string> { return Theme.downtownCamper
if (!env.HOTEL_BRANDING) { case SignatureHotelEnum.GrandHotelOslo:
return DEFAULT_THEME return Theme.grandHotel
case SignatureHotelEnum.Marski:
return Theme.marski
default:
return Theme.scandic
} }
}
const headersList = await headers() export function getThemeByHotel(hotelId: string, hotelType: string) {
const contentType = headersList.get("x-contenttype") || "" if (hotelType === HotelTypeEnum.ScandicGo) {
return Theme.scandicGo
const isHotelPage = }
contentType && contentType === PageContentTypeEnum.hotelPage if (hotelType === HotelTypeEnum.Signature) {
return getSignatureHotelTheme(hotelId)
if (isHotelPage) {
return await getHotelTheme(lang)
} }
return DEFAULT_THEME return DEFAULT_THEME

67
apps/scandic-web/utils/theme/utils.ts
View File

@@ -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
}
}