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

feat(BOOK-414): Added hotel branding themes to hotelpages

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-10-02 12:34:38 +00:00
parent f3dc818c06
commit 7fcd5833bd
17 changed files with 217 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/scandic-web/.env.local.example
View File

@@ -72,3 +72,4 @@ DTMC_ENTRA_ID_ISSUER=""
DTMC_ENTRA_ID_SECRET=""
PROMO_CAMPAIGN_PAGES_ENABLED="0" # 0 - disabled, 1 - enabled
HOTEL_BRANDING="0" # 0 - disabled, 1 - enabled

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

@@ -1,6 +1,6 @@
import { notFound } from "next/navigation"
import { getHotelPage } from "@/lib/trpc/memoizedRequests"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
import HotelMapPage from "@/components/ContentType/HotelMapPage"
import HotelPage from "@/components/ContentType/HotelPage"
@@ -8,34 +8,40 @@ import HotelSubpage from "@/components/ContentType/HotelSubpage"
import styles from "./page.module.css"
import type { PageArgs } from "@/types/params"
import type { LangParams, PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default async function HotelPagePage(
props: PageArgs<object, { subpage?: string; view?: "map" }>
props: PageArgs<LangParams, { subpage?: string; view?: "map" }>
) {
const searchParams = await props.searchParams
const params = await props.params
const hotelPageData = await getHotelPage()
if (!hotelPageData) {
return notFound()
}
const hotelData = await getHotel({
hotelId: hotelPageData.hotel_page_id,
isCardOnlyPayment: false,
language: params.lang,
})
if (!hotelData) {
return notFound()
}
if (searchParams.subpage) {
return <HotelSubpage hotelData={hotelData} subpage={searchParams.subpage} />
} else if (searchParams.view === "map") {
return <HotelMapPage hotelData={hotelData} />
} else {
return (
<HotelSubpage
hotelId={hotelPageData.hotel_page_id}
subpage={searchParams.subpage}
/>
<div className={styles.page}>
<HotelPage hotelData={hotelData} hotelPageData={hotelPageData} />
</div>
)
}
if (searchParams.view === "map") {
return <HotelMapPage hotelId={hotelPageData.hotel_page_id} />
}
return (
<div className={styles.page}>
<HotelPage hotelId={hotelPageData.hotel_page_id} />
</div>
)
}

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

@@ -0,0 +1,10 @@
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 Normal file
View File

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

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

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

29
apps/scandic-web/components/ContentType/HotelMapPage/index.tsx
View File

@@ -1,32 +1,23 @@
import { notFound } from "next/navigation"
import { type HotelData } from "@scandic-hotels/trpc/types/hotel"
import { env } from "@/env/server"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
import { getLang } from "@/i18n/serverContext"
import HotelMapPageClient from "./Client"
import type { HotelType } from "@scandic-hotels/common/constants/hotelType"
interface HotelMapPageProps {
hotelId: string
hotelData: HotelData
}
export default async function HotelMapPage({ hotelId }: HotelMapPageProps) {
const lang = await getLang()
const hotelPageData = await getHotelPage()
const hotelData = await getHotel({
hotelId,
isCardOnlyPayment: false,
language: lang,
})
if (!hotelPageData || !hotelData) {
notFound()
}
const { name, location, pointsOfInterest, hotelType } = hotelData.hotel
export default async function HotelMapPage({ hotelData }: HotelMapPageProps) {
const {
name,
location,
pointsOfInterest,
hotelType,
operaId: hotelId,
} = hotelData.hotel
const coordinates = {
lat: location.latitude,

36
apps/scandic-web/components/ContentType/HotelPage/index.tsx
View File

@@ -6,12 +6,9 @@ import { safeTry } from "@scandic-hotels/common/utils/safeTry"
import { Alert } from "@scandic-hotels/design-system/Alert"
import Link from "@scandic-hotels/design-system/Link"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { type HotelPageData } from "@scandic-hotels/trpc/types/hotelPage"
import {
getHotel,
getHotelPage,
getMeetingRooms,
} from "@/lib/trpc/memoizedRequests"
import { getMeetingRooms } from "@/lib/trpc/memoizedRequests"
import AccordionSection from "@/components/Blocks/Accordion"
import Breadcrumbs from "@/components/Breadcrumbs"
@@ -52,31 +49,25 @@ import {
import styles from "./hotelPage.module.css"
import type { HotelType } from "@scandic-hotels/common/constants/hotelType"
import type { HotelData } from "@scandic-hotels/trpc/types/hotel"
import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
import { AlertName } from "@/types/enums/alert"
import { HotelHashValues } from "@/types/enums/hotelPage"
export default async function HotelPage({ hotelId }: HotelPageProps) {
interface HotelPageProps {
hotelData: HotelData
hotelPageData: HotelPageData
}
export default async function HotelPage({
hotelData,
hotelPageData,
}: HotelPageProps) {
const lang = await getLang()
const intl = await getIntl()
void getHotelPage()
void getHotel({
hotelId,
isCardOnlyPayment: false,
language: lang,
})
const hotelPageData = await getHotelPage()
const hotelData = await getHotel({
hotelId,
isCardOnlyPayment: false,
language: lang,
})
const [meetingRoomsData] = await safeTry(
getMeetingRooms({ hotelId, language: lang })
getMeetingRooms({ hotelId: hotelData.hotel.operaId, language: lang })
)
if (!hotelData?.hotel || !hotelPageData) {
@@ -106,6 +97,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
ratings,
parking,
hotelType,
operaId: hotelId,
} = hotel
const {
healthAndWellness,

25
apps/scandic-web/components/ContentType/HotelSubpage/index.tsx
View File

@@ -1,9 +1,5 @@
import { notFound } from "next/navigation"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
import { getLang } from "@/i18n/serverContext"
import AccessibilitySubpage from "./AccessibilitySubpage"
import MeetingsSubpage from "./MeetingsSubpage"
import ParkingSubpage from "./ParkingSubpage"
@@ -11,22 +7,17 @@ import RestaurantSubpage from "./RestaurantSubpage"
import { verifySubpageShouldExist } from "./utils"
import WellnessSubpage from "./WellnessSubpage"
import type { HotelSubpageProps } from "@/types/components/hotelPage/subpage"
import type { HotelData } from "@scandic-hotels/trpc/types/hotel"
interface HotelSubpageProps {
hotelData: HotelData
subpage: string
}
export default async function HotelSubpage({
hotelId,
hotelData,
subpage,
}: HotelSubpageProps) {
const lang = await getLang()
const [hotelPageData, hotelData] = await Promise.all([
getHotelPage(),
getHotel({ hotelId, language: lang, isCardOnlyPayment: false }),
])
if (!hotelData?.hotel || !hotelPageData) {
notFound()
}
if (!verifySubpageShouldExist(hotelData, subpage)) {
notFound()
}
@@ -49,7 +40,7 @@ export default async function HotelSubpage({
case additionalData.meetingRooms.nameInUrl:
return (
<MeetingsSubpage
hotelId={hotelId}
hotelId={hotel.operaId}
hotel={hotel}
additionalData={additionalData}
/>

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

@@ -0,0 +1,18 @@
"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
}

6
apps/scandic-web/env/server.ts vendored
View File

@@ -154,6 +154,11 @@ export const env = createEnv({
.refine((s) => s === "1" || s === "0")
.transform((s) => s === "1")
.default("0"),
HOTEL_BRANDING: z
.string()
.refine((s) => s === "1" || s === "0")
.transform((s) => s === "1")
.default("0"),
WEBVIEW_SHOW_OVERVIEW: z
.string()
.refine((s) => s === "1" || s === "0")
@@ -248,6 +253,7 @@ export const env = createEnv({
DTMC_ENTRA_ID_ISSUER: process.env.DTMC_ENTRA_ID_ISSUER,
DTMC_ENTRA_ID_SECRET: process.env.DTMC_ENTRA_ID_SECRET,
PROMO_CAMPAIGN_PAGES_ENABLED: process.env.PROMO_CAMPAIGN_PAGES_ENABLED,
HOTEL_BRANDING: process.env.HOTEL_BRANDING,
WEBVIEW_SHOW_OVERVIEW: process.env.WEBVIEW_SHOW_OVERVIEW,
ENABLE_NEW_OVERVIEW_SECTION: process.env.ENABLE_NEW_OVERVIEW_SECTION,
CHATBOT_LIVE_LANGS: process.env.CHATBOT_LIVE_LANGS,

4
apps/scandic-web/types/components/hotelPage/hotelPage.ts
View File

@@ -1,9 +1,5 @@
import type { HotelHashValues } from "@/types/enums/hotelPage"
export interface HotelPageProps {
hotelId: string
}
// Slugs that are not set elsewhere (dynamically or from CS)
export enum SidepeekSlugs {
about = "about",

4
apps/scandic-web/types/components/hotelPage/subpage.ts
View File

@@ -1,4 +0,0 @@
export interface HotelSubpageProps {
hotelId: string
subpage: string
}

28
apps/scandic-web/utils/theme/index.ts Normal file
View File

@@ -0,0 +1,28 @@
import { headers } from "next/headers"
import { PageContentTypeEnum } from "@scandic-hotels/trpc/enums/contentType"
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
}
const headersList = await headers()
const contentType = headersList.get("x-contenttype") || ""
const isHotelPage =
contentType && contentType === PageContentTypeEnum.hotelPage
if (isHotelPage) {
return await getHotelTheme(lang)
}
return DEFAULT_THEME
}

12
apps/scandic-web/utils/theme/types.ts Normal file
View File

@@ -0,0 +1,12 @@
export enum Theme {
downtownCamper = "downtown-camper",
grandHotel = "grand-hotel",
haymarket = "haymarket",
hotelNorge = "hotel-norge",
marski = "marski",
scandic = "scandic",
scandicGo = "scandic-go",
}
export const DEFAULT_THEME = Theme.scandic
export const THEMES = Object.values(Theme)

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

@@ -0,0 +1,67 @@
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
}
}

9
packages/trpc/lib/types/hotelPage.ts
View File

@@ -9,6 +9,7 @@ import type {
} from "../routers/contentstack/hotelPage/output"
import type { activitiesCardSchema } from "../routers/contentstack/schemas/blocks/activitiesCard"
import type { spaPageSchema } from "../routers/contentstack/schemas/blocks/spaPage"
import type { Campaigns } from "./campaignPage"
export interface GetHotelPageData extends z.input<typeof hotelPageSchema> {}
export interface HotelPage extends z.output<typeof hotelPageSchema> {}
@@ -28,3 +29,11 @@ export interface GetHotelPageUrlsData
export interface GetHotelPageCountData
extends z.input<typeof hotelPageCountSchema> {}
export type HotelPageUrls = z.output<typeof hotelPageUrlsSchema>
export type HotelPageData = HotelPage["hotel_page"] & {
campaignsBlock?:
| (Omit<HotelPage["hotel_page"]["campaigns"], "prioritizedCampaigns"> & {
campaigns: Campaigns
})
| null
}