Merged in chore/next15 (pull request #1999)

chore (SW-834): Upgrade to Next 15

* wip: apply codemod and upgrade swc plugin

* wip: design-system to react 19, fix issues from async (search)params

* wip: fix remaining issues from codemod

serverClient is now async because context use headers()
getLang is now async because it uses headers()

* Minor cleanup

* Inline react-material-symbols package

Package is seemingly not maintained any more and doesn't support
React 19. This copies the package source into `design-system`,
makes the necessary changes for 19 and export it for others to use.

* Fix missing awaits

* Disable modal exit animations

Enabling modal exit animations via isExiting prop is causing
modals to be rendered in "hidden" state and never unmount.
Seems to be an issue with react-aria-components,
see https://github.com/adobe/react-spectrum/issues/7563.
Can probably be fixed by rewriting to a solution similar to
https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html

* Remove unstable cache implementation and use in memory cache locally

* Fix ref type in SelectFilter

* Use cloneElement to add key prop to element


Approved-by: Linus Flood

apps/scandic-web/app/[lang]/(live)/(protected)/logout/route.ts

@@ -10,7 +10,7 @@ import { signOut } from "@/auth"
 
 export async function GET(
   request: NextRequest,
-  context: { params: { lang: Lang } }
+  context: { params: Promise<{ lang: Lang }> }
 ) {
   const publicURL = getPublicURL(request)
 
@@ -49,7 +49,8 @@ export async function GET(
     try {
       // Initiate the seamless logout flow
       let redirectUrlValue
-      switch (context.params.lang) {
+      const params = await context.params
+      switch (params.lang) {
         case Lang.da:
           redirectUrlValue = env.SEAMLESS_LOGOUT_DA
           break

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -14,7 +14,8 @@ export { generateMetadata } from "@/utils/generateMetadata"
 export default async function MyPages({}: PageArgs<
   LangParams & { path: string[] }
 >) {
-  const accountPageRes = await serverClient().contentstack.accountPage.get()
+  const caller = await serverClient()
+  const accountPageRes = await caller.contentstack.accountPage.get()
   const intl = await getIntl()
 
   if (!accountPageRes) {

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx

@@ -7,7 +7,8 @@ import TrackingSDK from "@/components/TrackingSDK"
 import styles from "./page.module.css"
 
 export default async function EditProfileSlot() {
-  const accountPage = await serverClient().contentstack.accountPage.get()
+  const caller = await serverClient()
+  const accountPage = await caller.contentstack.accountPage.get()
   const user = await getProfile()
 
   if (!user || "error" in user) {

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx

@@ -8,7 +8,8 @@ import type { LangParams, PageArgs } from "@/types/params"
 export { generateMetadata } from "@/utils/generateMetadata"
 
 export default async function ProfilePage({}: PageArgs<LangParams>) {
-  const accountPage = await serverClient().contentstack.accountPage.get()
+  const caller = await serverClient()
+  const accountPage = await caller.contentstack.accountPage.get()
 
   return (
     <>

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/page.tsx

@@ -4,10 +4,11 @@ import InitLivePreview from "@/components/LivePreview"
 
 import type { PageArgs, UIDParams } from "@/types/params"
 
-export default function PreviewPage({
+export default async function PreviewPage(
-  searchParams,
+  props: PageArgs<UIDParams, URLSearchParams>
-  params,
+) {
-}: PageArgs<UIDParams, URLSearchParams>) {
+  const params = await props.params
+  const searchParams = await props.searchParams
   const shouldInitializePreview = searchParams.isPreview === "true"
 
   if (searchParams.live_preview) {

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/content_page/[uid]/page.tsx

@@ -12,8 +12,9 @@ import { isLoggedInUser } from "@/utils/isLoggedInUser"
 export { generateMetadata } from "@/utils/generateMetadata"
 
 export default async function ContentPagePage() {
-  const lang = getLang()
+  const lang = await getLang()
-  const pathname = headers().get("x-pathname") || ""
+  const headersList = await headers()
+  const pathname = headersList.get("x-pathname") || ""
   const isSignupRoute = isSignupPage(pathname)
 
   if (isSignupRoute) {

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx

@@ -10,9 +10,10 @@ import type { PageArgs } from "@/types/params"
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
-export default function DestinationCityPagePage({
+export default async function DestinationCityPagePage(
-  searchParams,
+  props: PageArgs<{}, { view?: "map" }>
-}: PageArgs<{}, { view?: "map" }>) {
+) {
+  const searchParams = await props.searchParams
   if (env.NEW_SITE_LIVE_STATUS === "NOT_LIVE") {
     return notFound()
   }

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

@@ -11,9 +11,10 @@ import type { PageArgs } from "@/types/params"
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
-export default async function HotelPagePage({
+export default async function HotelPagePage(
-  searchParams,
+  props: PageArgs<{}, { subpage?: string; view?: "map" }>
-}: PageArgs<{}, { subpage?: string; view?: "map" }>) {
+) {
+  const searchParams = await props.searchParams
   if (env.NEW_SITE_LIVE_STATUS === "NOT_LIVE") {
     return notFound()
   }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/start_page/[uid]/page.tsx

@@ -9,9 +9,10 @@ import type { PageArgs } from "@/types/params"
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
-export default function StartPagePage({
+export default async function StartPagePage(
-  searchParams,
+  props: PageArgs<{}, BookingWidgetSearchData>
-}: PageArgs<{}, BookingWidgetSearchData>) {
+) {
+  const searchParams = await props.searchParams
   if (env.NEW_SITE_LIVE_STATUS === "NOT_LIVE") {
     return notFound()
   }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx

@@ -9,22 +9,19 @@ import { decrypt } from "@/utils/encryption"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function BookingConfirmationPage({
+export default async function BookingConfirmationPage(
-  params,
+  props: PageArgs<LangParams, { RefId?: string }>
-  searchParams,
+) {
-}: PageArgs<
+  const searchParams = await props.searchParams
-  LangParams,
+  const params = await props.params
-  {
-    RefId?: string
-  }
->) {
   const refId = searchParams.RefId
 
   if (!refId) {
     notFound()
   }
 
-  const sig = cookies().get("bcsig")?.value
+  const cookieStore = await cookies()
+  const sig = cookieStore.get("bcsig")?.value
 
   if (!sig) {
     redirect(`/${params.lang}`)

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx

@@ -13,18 +13,19 @@ import LoadingSpinner from "@/components/LoadingSpinner"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function GuaranteePaymentCallbackPage({
+export default async function GuaranteePaymentCallbackPage(
-  params,
+  props: PageArgs<
-  searchParams,
+    LangParams,
-}: PageArgs<
+    {
-  LangParams,
+      status?: PaymentCallbackStatusEnum
-  {
+      RefId?: string
-    status?: PaymentCallbackStatusEnum
+      confirmationNumber?: string
-    RefId?: string
+      ancillary?: string
-    confirmationNumber?: string
+    }
-    ancillary?: string
+  >
-  }
+) {
->) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   console.log(`[gla-payment-callback] callback started`)
   const lang = params.lang
   const status = searchParams.status
@@ -57,7 +58,8 @@ export default async function GuaranteePaymentCallbackPage({
 
   if (refId) {
     try {
-      const bookingStatus = await serverClient().booking.status({
+      const caller = await serverClient()
+      const bookingStatus = await caller.booking.status({
         refId,
       })
 

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/page.tsx

@@ -20,17 +20,18 @@ import { isValidSession } from "@/utils/session"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function PaymentCallbackPage({
+export default async function PaymentCallbackPage(
-  params,
+  props: PageArgs<
-  searchParams,
+    LangParams,
-}: PageArgs<
+    {
-  LangParams,
+      status?: PaymentCallbackStatusEnum
-  {
+      confirmationNumber?: string
-    status?: PaymentCallbackStatusEnum
+      hotel?: string
-    confirmationNumber?: string
+    }
-    hotel?: string
+  >
-  }
+) {
->) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   console.log(`[payment-callback] callback started`)
   const lang = params.lang
   const status = searchParams.status
@@ -87,7 +88,8 @@ export default async function PaymentCallbackPage({
 
   if (refId) {
     try {
-      const bookingStatus = await serverClient().booking.status({
+      const caller = await serverClient()
+      const bookingStatus = await caller.booking.status({
         refId,
       })
 

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/map/page.tsx

@@ -3,15 +3,21 @@ import { Suspense } from "react"
 import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
 import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
 import { MapContainer } from "@/components/MapContainer"
+import { convertSearchParamsToObj } from "@/utils/url"
 
 import styles from "./page.module.css"
 
 import type { AlternativeHotelsSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function SelectHotelMapPage({
+export default async function SelectHotelMapPage(
-  searchParams,
+  props: PageArgs<LangParams, AlternativeHotelsSearchParams>
-}: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
+) {
+  const searchParams = await props.searchParams
+
+  const booking =
+    convertSearchParamsToObj<AlternativeHotelsSearchParams>(searchParams)
+
   return (
     <div className={styles.main}>
       <MapContainer>
@@ -19,10 +25,7 @@ export default async function SelectHotelMapPage({
           key={searchParams.hotel}
           fallback={<SelectHotelMapContainerSkeleton />}
         >
-          <SelectHotelMapContainer
+          <SelectHotelMapContainer booking={booking} isAlternativeHotels />
-            searchParams={searchParams}
-            isAlternativeHotels
-          />
         </Suspense>
       </MapContainer>
     </div>

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx

@@ -12,21 +12,26 @@ import { getHotels } from "@/components/HotelReservation/SelectHotel/helpers"
 import { getTracking } from "@/components/HotelReservation/SelectHotel/tracking"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
-import { setLang } from "@/i18n/serverContext"
 import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
+import { convertSearchParamsToObj } from "@/utils/url"
 
 import type {
   AlternativeHotelsSearchParams,
   SelectHotelSearchParams,
 } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function AlternativeHotelsPage({
+export default async function AlternativeHotelsPage(
-  params,
+  props: PageArgs<LangParams, AlternativeHotelsSearchParams>
-  searchParams,
+) {
-}: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
+  const searchParams = await props.searchParams
-  setLang(params.lang)
+  const params = await props.params
-  const searchDetails = await getHotelSearchDetails({ searchParams }, true)
+
+  const booking =
+    convertSearchParamsToObj<AlternativeHotelsSearchParams>(searchParams)
+
+  const searchDetails = await getHotelSearchDetails(booking, true)
 
   if (!searchDetails || !searchDetails.hotel || !searchDetails.city) {
     return notFound()
@@ -44,7 +49,7 @@ export default async function AlternativeHotelsPage({
   } = searchDetails
 
   if (bookingCode && FamilyAndFriendsCodes.includes(bookingCode)) {
-    const cookieStore = cookies()
+    const cookieStore = await cookies()
     const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
 
     if (isInvalidFNF) {
@@ -55,7 +60,7 @@ export default async function AlternativeHotelsPage({
   // TODO: This needs to be refactored into its
   // own functions
   const hotels = await getHotels(
-    selectHotelParams as SelectHotelSearchParams,
+    selectHotelParams,
     isAlternativeFor,
     bookingCode,
     city,

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx

@@ -27,10 +27,14 @@ import styles from "./page.module.css"
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function DetailsPage({
+export default async function DetailsPage(
-  params: { lang },
+  props: PageArgs<LangParams, SelectRateSearchParams>
-  searchParams,
+) {
-}: PageArgs<LangParams, SelectRateSearchParams>) {
+  const searchParams = await props.searchParams
+  const params = await props.params
+
+  const { lang } = params
+
   const selectRoomParams = new URLSearchParams(searchParams)
 
   const { errorCode, ...booking } =
@@ -44,7 +48,7 @@ export default async function DetailsPage({
     booking.bookingCode &&
     FamilyAndFriendsCodes.includes(booking.bookingCode)
   ) {
-    const cookieStore = cookies()
+    const cookieStore = await cookies()
     const isInValidFNF = cookieStore.get("sc")?.value !== "1"
 
     if (isInValidFNF) {

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx

@@ -8,7 +8,11 @@ import {
 } from "@/types/components/tracking"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
+export default async function HotelReservationPage(
+  props: PageArgs<LangParams>
+) {
+  const params = await props.params
+
   const pageTrackingData: TrackingSDKPageData = {
     pageId: "hotelreservation",
     domainLanguage: params.lang,

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -4,17 +4,22 @@ import { Suspense } from "react"
 import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
 import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
 import { MapContainer } from "@/components/MapContainer"
+import { convertSearchParamsToObj } from "@/utils/url"
 
 import styles from "./page.module.css"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function SelectHotelMapPage({
+export default async function SelectHotelMapPage(
-  searchParams,
+  props: PageArgs<LangParams, SelectHotelSearchParams>
-}: PageArgs<LangParams, SelectHotelSearchParams>) {
+) {
+  const searchParams = await props.searchParams
   const suspenseKey = stringify(searchParams)
 
+  const booking =
+    convertSearchParamsToObj<SelectHotelSearchParams>(searchParams)
+
   return (
     <div className={styles.main}>
       <MapContainer>
@@ -22,7 +27,7 @@ export default async function SelectHotelMapPage({
           key={suspenseKey}
           fallback={<SelectHotelMapContainerSkeleton />}
         >
-          <SelectHotelMapContainer searchParams={searchParams} />
+          <SelectHotelMapContainer booking={booking} />
         </Suspense>
       </MapContainer>
     </div>

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -11,18 +11,22 @@ import SelectHotel from "@/components/HotelReservation/SelectHotel"
 import { getHotels } from "@/components/HotelReservation/SelectHotel/helpers"
 import { getTracking } from "@/components/HotelReservation/SelectHotel/tracking"
 import TrackingSDK from "@/components/TrackingSDK"
-import { setLang } from "@/i18n/serverContext"
 import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
+import { convertSearchParamsToObj } from "@/utils/url"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function SelectHotelPage({
+export default async function SelectHotelPage(
-  params,
+  props: PageArgs<LangParams, SelectHotelSearchParams>
-  searchParams,
+) {
-}: PageArgs<LangParams, SelectHotelSearchParams>) {
+  const searchParams = await props.searchParams
-  setLang(params.lang)
+  const params = await props.params
-  const searchDetails = await getHotelSearchDetails({ searchParams })
+
+  const booking =
+    convertSearchParamsToObj<SelectHotelSearchParams>(searchParams)
+
+  const searchDetails = await getHotelSearchDetails(booking)
 
   if (!searchDetails || !searchDetails.city) return notFound()
 
@@ -37,7 +41,7 @@ export default async function SelectHotelPage({
   } = searchDetails
 
   if (bookingCode && FamilyAndFriendsCodes.includes(bookingCode)) {
-    const cookieStore = cookies()
+    const cookieStore = await cookies()
     const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
 
     if (isInvalidFNF) {

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -13,10 +13,11 @@ const singleRoomRateTypes = combineRegExps(
   "i"
 )
 
-export default async function SelectRatePage({
+export default async function SelectRatePage(
-  params,
+  props: PageArgs<LangParams & { section: string }, SelectRateSearchParams>
-  searchParams,
+) {
-}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
+  const params = await props.params
+  const searchParams = await props.searchParams
   const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
 
   const isMultiRoom = booking.rooms.length > 1
@@ -35,5 +36,5 @@ export default async function SelectRatePage({
     delete searchParams.bookingCode
   }
 
-  return <SelectRate params={params} searchParams={searchParams} />
+  return <SelectRate lang={params.lang} booking={booking} />
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/layout.tsx

@@ -2,7 +2,8 @@ import { env } from "@/env/server"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export async function generateMetadata({ params }: PageArgs<LangParams>) {
+export async function generateMetadata(props: PageArgs<LangParams>) {
+  const params = await props.params;
   return {
     robots: {
       index: env.isLangLive(params.lang),

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/my-stay/page.tsx

@@ -47,10 +47,11 @@ import type { LangParams, PageArgs } from "@/types/params"
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 import type { SafeUser } from "@/types/user"
 
-export default async function MyStay({
+export default async function MyStay(
-  params,
+  props: PageArgs<LangParams, { RefId?: string }>
-  searchParams,
+) {
-}: PageArgs<LangParams, { RefId?: string }>) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   setLang(params.lang)
   const refId = searchParams.RefId
 
@@ -65,7 +66,8 @@ export default async function MyStay({
 
   const isLoggedIn = await isLoggedInUser()
 
-  const bv = cookies().get("bv")?.value
+  const cookieStore = await cookies()
+  const bv = cookieStore.get("bv")?.value
   let bookingConfirmation
   if (isLoggedIn) {
     bookingConfirmation = await getBookingConfirmation(refId)

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/my-stay/tracking.tsx

@@ -6,8 +6,8 @@ import {
   type TrackingSDKPageData,
 } from "@/types/components/tracking"
 
-export default function Tracking() {
+export default async function Tracking() {
-  const lang = getLang()
+  const lang = await getLang()
 
   const pageTrackingData: TrackingSDKPageData = {
     channel: TrackingChannelEnum.hotels,

apps/scandic-web/app/[lang]/(live)/(public)/login/route.ts

@@ -10,8 +10,9 @@ import { signIn } from "@/auth"
 
 export async function GET(
   request: NextRequest,
-  context: { params: { lang: Lang } }
+  context: { params: Promise<{ lang: Lang }> }
 ) {
+  const contextParams = await context.params
   const publicURL = getPublicURL(request)
 
   let redirectHeaders: Headers | undefined = undefined
@@ -67,7 +68,7 @@ export async function GET(
     try {
       // Initiate the seamless login flow
       let redirectUrlValue
-      switch (context.params.lang) {
+      switch (contextParams.lang) {
         case Lang.da:
           redirectUrlValue = env.SEAMLESS_LOGIN_DA
           break
@@ -115,7 +116,7 @@ export async function GET(
 
     /** Record<string, any> is next-auth typings */
     const params: Record<string, any> = {
-      ui_locales: context.params.lang,
+      ui_locales: contextParams.lang,
       scope: [
         "openid",
         "profile",

apps/scandic-web/app/[lang]/(live)/(public)/verifymagiclink/route.ts

@@ -10,7 +10,7 @@ import type { Lang } from "@/constants/languages"
 
 export async function GET(
   request: NextRequest,
-  context: { params: { lang: Lang } }
+  context: { params: Promise<{ lang: Lang }> }
 ) {
   const publicURL = getPublicURL(request)
 
@@ -52,6 +52,7 @@ export async function GET(
   try {
     console.log(`[verifymagiclink] final redirectUrl: ${redirectTo}`)
 
+    const params = await context.params
     /**
      * Passing `redirect: false` to `signIn` will return the URL instead of
      * automatically redirecting to it inside of `signIn`.
@@ -64,7 +65,7 @@ export async function GET(
         redirect: false,
       },
       {
-        ui_locales: context.params.lang,
+        ui_locales: params.lang,
         scope: [
           "openid",
           "profile",

apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/destination_city_page/[uid]/page.tsx

@@ -6,9 +6,8 @@ import { BookingWidget } from "@/components/BookingWidget"
 import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
 import type { PageArgs } from "@/types/params"
 
-export default async function BookingWidgetDestinationCityPage({
+export default async function BookingWidgetDestinationCityPage(props: PageArgs<{}, BookingWidgetSearchData>) {
-  searchParams,
+  const searchParams = await props.searchParams;
-}: PageArgs<{}, BookingWidgetSearchData>) {
   if (env.NEW_SITE_LIVE_STATUS === "NOT_LIVE") {
     return null
   }

apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/hotel_page/[uid]/page.tsx

@@ -7,9 +7,10 @@ import { getLang } from "@/i18n/serverContext"
 import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
 import type { PageArgs } from "@/types/params"
 
-export default async function BookingWidgetHotelPage({
+export default async function BookingWidgetHotelPage(
-  searchParams,
+  props: PageArgs<{}, BookingWidgetSearchData & { subpage?: string }>
-}: PageArgs<{}, BookingWidgetSearchData & { subpage?: string }>) {
+) {
+  const searchParams = await props.searchParams
   if (env.NEW_SITE_LIVE_STATUS === "NOT_LIVE") {
     return null
   }
@@ -19,7 +20,7 @@ export default async function BookingWidgetHotelPage({
   const hotelPageData = await getHotelPage()
   const hotelData = await getHotel({
     hotelId: hotelPageData?.hotel_page_id || "",
-    language: getLang(),
+    language: await getLang(),
     isCardOnlyPayment: false,
   })
 

apps/scandic-web/app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx

@@ -3,8 +3,10 @@ import { BookingWidget } from "@/components/BookingWidget"
 import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function BookingWidgetPage({
+export default async function BookingWidgetPage(
-  searchParams,
+  props: PageArgs<LangParams, BookingWidgetSearchData>
-}: PageArgs<LangParams, BookingWidgetSearchData>) {
+) {
+  const searchParams = await props.searchParams
+
   return <BookingWidget bookingWidgetSearchParams={searchParams} />
 }

apps/scandic-web/app/[lang]/(live)/@bookingwidget/page.tsx

@@ -5,10 +5,9 @@ import { BookingWidget } from "@/components/BookingWidget"
 import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function BookingWidgetPage({
+export default async function BookingWidgetPage(props: PageArgs<LangParams, BookingWidgetSearchData>) {
-  searchParams,
+  const params = await props.params;
-  params,
+  const searchParams = await props.searchParams;
-}: PageArgs<LangParams, BookingWidgetSearchData>) {
   if (!env.isLangLive(params.lang)) {
     return null
   }

apps/scandic-web/app/[lang]/(live)/error.tsx

@@ -24,7 +24,7 @@ export default function Error({
   const params = useParams<LangParams>()
   const router = useRouter()
   const searchParams = useSearchParams()
-  const currentSearchParamsRef = useRef<string>()
+  const currentSearchParamsRef = useRef<string>(undefined)
   const isFirstLoadRef = useRef<boolean>(true)
 
   useEffect(() => {

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

@@ -27,15 +27,20 @@ import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
-export default async function RootLayout({
+export default async function RootLayout(
-  bookingwidget,
+  props: React.PropsWithChildren<
-  children,
+    LayoutArgs<LangParams> & {
-  params,
+      bookingwidget: React.ReactNode
-}: React.PropsWithChildren<
+    }
-  LayoutArgs<LangParams> & {
+  >
-    bookingwidget: React.ReactNode
+) {
-  }
+  const params = await props.params;
->) {
+
+  const {
+    bookingwidget,
+    children
+  } = props;
+
   setLang(params.lang)
   const messages = await getMessages(params.lang)
 

apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.tsx

@@ -2,13 +2,11 @@ import styles from "./page.module.css"
 
 import type { LangParams, LayoutArgs, StatusParams } from "@/types/params"
 
-export default async function MiddlewareError({
+export default async function MiddlewareError(props: LayoutArgs<LangParams & StatusParams>) {
-  params,
+  const params = await props.params;
-}: LayoutArgs<LangParams & StatusParams>) {
   return (
     // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-    <div className={styles.layout}>
+    <div className={styles.layout}>Middleware error {params.lang} {params.status}
-      Middleware error {params.lang} {params.status}
     </div>
-  )
+  );
 }

apps/scandic-web/app/[lang]/(live-current)/current-content-page/page.tsx

@@ -11,10 +11,9 @@ import type { LangParams, PageArgs, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
 import type { TrackingData } from "@/types/requests/trackingData"
 
-export default async function CurrentContentPage({
+export default async function CurrentContentPage(props: PageArgs<LangParams, UriParams>) {
-  params,
+  const searchParams = await props.searchParams;
-  searchParams,
+  const params = await props.params;
-}: PageArgs<LangParams, UriParams>) {
   try {
     if (!searchParams.uri) {
       throw new Error("Bad URI")

apps/scandic-web/app/[lang]/(live-current)/layout.tsx

@@ -30,13 +30,18 @@ export const metadata: Metadata = {
   title: "Scandic Hotels",
 }
 
-export default async function RootLayout({
+export default async function RootLayout(
-  children,
+  props: React.PropsWithChildren<
-  params,
+    LayoutArgs<LangParams> & { header: React.ReactNode }
-  header,
+  >
-}: React.PropsWithChildren<
+) {
-  LayoutArgs<LangParams> & { header: React.ReactNode }
+  const params = await props.params;
->) {
+
+  const {
+    children,
+    header
+  } = props;
+
   setLang(params.lang)
   const messages = await getMessages(params.lang)
 

apps/scandic-web/app/[lang]/(no-layout)/hotelreservation/my-stay/receipt/page.tsx

@@ -6,9 +6,8 @@ import { Receipt } from "@/components/HotelReservation/MyStay/Receipt"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function ReceiptPage({
+export default async function ReceiptPage(props: PageArgs<LangParams, { RefId?: string }>) {
-  searchParams,
+  const searchParams = await props.searchParams;
-}: PageArgs<LangParams, { RefId?: string }>) {
   if (!searchParams.RefId) {
     notFound()
   }

apps/scandic-web/app/[lang]/(no-layout)/layout.tsx

@@ -23,10 +23,13 @@ import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
-export default async function RootLayout({
+export default async function RootLayout(props: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  children,
+  const params = await props.params;
-  params,
+
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  const {
+    children
+  } = props;
+
   setLang(params.lang)
   const messages = await getMessages(params.lang)
 

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/callback/route.ts

@@ -23,8 +23,9 @@ const tokenResponseSchema = z.object({
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { lang: string } }
+  props: { params: Promise<{ lang: string }> }
 ) {
+  const params = await props.params
   const { lang } = params
 
   const result = searchParamsSchema.safeParse({
@@ -72,7 +73,7 @@ export async function GET(
     redirect(`/${lang}/sas-x-scandic/error?errorCode=invalid_state`)
   }
 
-  const cookieStore = cookies()
+  const cookieStore = await cookies()
   cookieStore.set(SAS_TOKEN_STORAGE_KEY, tokenData.access_token, {
     maxAge: 3600,
     httpOnly: true,
@@ -83,7 +84,8 @@ export async function GET(
     stateResult.data.intent === "unlink" ||
     stateResult.data.intent === "transfer"
   ) {
-    const [data, error] = await safeTry(serverClient().partner.sas.requestOtp())
+    const caller = await serverClient()
+    const [data, error] = await safeTry(caller.partner.sas.requestOtp())
     if (!data || error) {
       console.error("[SAS] Failed to request OTP", error)
       redirect(`/${lang}/sas-x-scandic/error`)

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/error/page.tsx

@@ -12,9 +12,10 @@ import { UnlinkError } from "../components/UnlinkError"
 
 import type { LangParams, PageArgs, SearchParams } from "@/types/params"
 
-export default async function Page({
+export default async function Page(
-  searchParams,
+  props: PageArgs<LangParams> & SearchParams<{ errorCode?: "dateOfBirthMismatch" }>
-}: PageArgs<LangParams> & SearchParams<{ errorCode?: "dateOfBirthMismatch" }>) {
+) {
+  const searchParams = await props.searchParams;
   const intl = await getIntl()
 
   const { errorCode } = searchParams

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx

@@ -13,10 +13,13 @@ import type { PropsWithChildren } from "react"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
-export default async function SasXScandicLayout({
+export default async function SasXScandicLayout(props: PropsWithChildren<LayoutArgs<LangParams>>) {
-  children,
+  const params = await props.params;
-  params,
+
-}: PropsWithChildren<LayoutArgs<LangParams>>) {
+  const {
+    children
+  } = props;
+
   const intl = await getIntl()
 
   return (

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/page.tsx

@@ -10,9 +10,8 @@ import { LinkAccountForm } from "./LinkAccountForm"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function SASxScandicLinkPage({
+export default async function SASxScandicLinkPage(props: PageArgs<LangParams>) {
-  params,
+  const params = await props.params;
-}: PageArgs<LangParams>) {
   const profile = await getProfileSafely()
 
   if (!profile || !profile.loyalty) return null

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/success/page.tsx

@@ -12,9 +12,8 @@ import { SASModal } from "../../components/SASModal"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function SASxScandicLinkPage({
+export default async function SASxScandicLinkPage(props: PageArgs<LangParams>) {
-  params,
+  const params = await props.params;
-}: PageArgs<LangParams>) {
   const intl = await getIntl()
 
   return (

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx

@@ -24,10 +24,9 @@ const searchParamsSchema = z.object({
 
 type Intent = z.infer<typeof searchParamsSchema>["intent"]
 
-export default async function SASxScandicLoginPage({
+export default async function SASxScandicLoginPage(props: PageArgs<LangParams> & SearchParams) {
-  searchParams,
+  const params = await props.params;
-  params,
+  const searchParams = await props.searchParams;
-}: PageArgs<LangParams> & SearchParams) {
   const result = searchParamsSchema.safeParse(searchParams)
   if (!result.success) {
     // TOOD where to redirect?

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/page.tsx

@@ -29,12 +29,13 @@ const searchParamsSchema = z.object({
 export type OtpError = z.infer<typeof otpError>
 type Intent = z.infer<typeof intent>
 
-export default async function SASxScandicOneTimePasswordPage({
+export default async function SASxScandicOneTimePasswordPage(
-  searchParams,
+  props: PageArgs<LangParams> & SearchParams
-  params,
+) {
-}: PageArgs<LangParams> & SearchParams) {
+  const params = await props.params
+  const searchParams = await props.searchParams
   const intl = await getIntl()
-  const cookieStore = cookies()
+  const cookieStore = await cookies()
   const tokenCookie = cookieStore.get(SAS_TOKEN_STORAGE_KEY)
 
   const result = searchParamsSchema.safeParse(searchParams)
@@ -49,9 +50,8 @@ export default async function SASxScandicOneTimePasswordPage({
 
   const handleOtpVerified: OnSubmitHandler = async ({ otp }) => {
     "use server"
-    const [data, error] = await safeTry(
+    const caller = await serverClient()
-      serverClient().partner.sas.verifyOtp({ otp })
+    const [data, error] = await safeTry(caller.partner.sas.verifyOtp({ otp }))
-    )
 
     if (error || !data) {
       throw error || new Error("OTP verification failed")
@@ -166,7 +166,8 @@ async function handleLinkAccount({
 }: {
   lang: Lang
 }): ReturnType<OnSubmitHandler> {
-  const [res, error] = await safeTry(serverClient().partner.sas.linkAccount())
+  const caller = await serverClient()
+  const [res, error] = await safeTry(caller.partner.sas.linkAccount())
   if (!res || error) {
     console.error("[SAS] link account error", error)
     return {
@@ -208,7 +209,8 @@ async function handleUnlinkAccount({
 }: {
   lang: Lang
 }): ReturnType<OnSubmitHandler> {
-  const [res, error] = await safeTry(serverClient().partner.sas.unlinkAccount())
+  const caller = await serverClient()
+  const [res, error] = await safeTry(caller.partner.sas.unlinkAccount())
   if (!res || error) {
     console.error("[SAS] unlink account error", error)
     return {
@@ -239,7 +241,7 @@ async function handleTransferPoints({
 }: {
   lang: Lang
 }): ReturnType<OnSubmitHandler> {
-  const cookieStore = cookies()
+  const cookieStore = await cookies()
   const pointsCookie = cookieStore.get(SAS_TRANSFER_POINT_KEY)
   const points = Number(pointsCookie?.value)
 
@@ -252,8 +254,9 @@ async function handleTransferPoints({
     }
   }
 
+  const caller = await serverClient()
   const [res, error] = await safeTry(
-    serverClient().partner.sas.transferPoints({
+    caller.partner.sas.transferPoints({
       points,
     })
   )

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx

@@ -20,10 +20,9 @@ import styles from "./transferSuccess.module.css"
 import type { LangParams, PageArgs, SearchParams } from "@/types/params"
 import type { Lang } from "@/constants/languages"
 
-export default async function SASxScandicTransferSuccessPage({
+export default async function SASxScandicTransferSuccessPage(props: PageArgs<LangParams> & SearchParams<{ p?: string }>) {
-  params,
+  const searchParams = await props.searchParams;
-  searchParams,
+  const params = await props.params;
-}: PageArgs<LangParams> & SearchParams<{ p?: string }>) {
   const intl = await getIntl()
   const { lang } = params
   const addedPoints = Number(searchParams.p) || 0

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/unlink/success/page.tsx

@@ -12,9 +12,8 @@ import { SASModal } from "../../components/SASModal"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function SASxScandicUnlinkSuccessPage({
+export default async function SASxScandicUnlinkSuccessPage(props: PageArgs<LangParams>) {
-  params,
+  const params = await props.params;
-}: PageArgs<LangParams>) {
   const intl = await getIntl()
 
   return (

apps/scandic-web/app/[lang]/(partner)/layout.tsx

@@ -23,10 +23,13 @@ import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
-export default async function RootLayout({
+export default async function RootLayout(props: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  children,
+  const params = await props.params;
-  params,
+
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  const {
+    children
+  } = props;
+
   if (!env.SAS_ENABLED) {
     return null
   }

apps/scandic-web/app/[lang]/webview/[contentType]/[uid]/page.tsx

@@ -14,9 +14,10 @@ import type {
   UIDParams,
 } from "@/types/params"
 
-export default async function ContentTypePage({
+export default async function ContentTypePage(
-  params,
+  props: PageArgs<LangParams & ContentTypeWebviewParams & UIDParams, {}>
-}: PageArgs<LangParams & ContentTypeWebviewParams & UIDParams, {}>) {
+) {
+  const params = await props.params
   const intl = await getIntl()
   const user = await getProfile()
 
@@ -36,8 +37,8 @@ export default async function ContentTypePage({
       case "unauthorized": // fall through
       case "forbidden": // fall through
       case "token_expired":
-        const h = headers()
+        const headersList = await headers()
-        const returnURL = `/${params.lang}/webview${h.get("x-pathname")!}`
+        const returnURL = `/${params.lang}/webview${headersList.get("x-pathname")!}`
         const redirectURL = `/${params.lang}/webview/refresh?returnUrl=${encodeURIComponent(returnURL)}`
         console.log(`[webview:page] user error, redirecting to: ${redirectURL}`)
         redirect(redirectURL)

apps/scandic-web/app/[lang]/webview/hotelreservation/layout.tsx

@@ -2,7 +2,8 @@ import { env } from "@/env/server"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export async function generateMetadata({ params }: PageArgs<LangParams>) {
+export async function generateMetadata(props: PageArgs<LangParams>) {
+  const params = await props.params;
   return {
     robots: {
       index: env.isLangLive(params.lang),

apps/scandic-web/app/[lang]/webview/hotelreservation/my-stay/page.tsx

@@ -47,10 +47,11 @@ import type { LangParams, PageArgs } from "@/types/params"
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 import type { SafeUser } from "@/types/user"
 
-export default async function MyStay({
+export default async function MyStay(
-  params,
+  props: PageArgs<LangParams, { RefId?: string }>
-  searchParams,
+) {
-}: PageArgs<LangParams, { RefId?: string }>) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   setLang(params.lang)
   const refId = searchParams.RefId
 
@@ -66,7 +67,8 @@ export default async function MyStay({
 
   const isLoggedIn = await isLoggedInUser()
 
-  const bv = cookies().get("bv")?.value
+  const cookieStore = await cookies()
+  const bv = cookieStore.get("bv")?.value
   let bookingConfirmation
   if (isLoggedIn) {
     bookingConfirmation = await getBookingConfirmation(refId)

apps/scandic-web/app/[lang]/webview/hotelreservation/my-stay/tracking.tsx

@@ -6,8 +6,8 @@ import {
   type TrackingSDKPageData,
 } from "@/types/components/tracking"
 
-export default function Tracking() {
+export default async function Tracking() {
-  const lang = getLang()
+  const lang = await getLang()
 
   const pageTrackingData: TrackingSDKPageData = {
     channel: TrackingChannelEnum.hotels,

apps/scandic-web/app/[lang]/webview/layout.tsx

@@ -26,10 +26,13 @@ export const metadata: Metadata = {
   title: "Webview",
 }
 
-export default async function RootLayout({
+export default async function RootLayout(props: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  children,
+  const params = await props.params;
-  params,
+
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  const {
+    children
+  } = props;
+
   setLang(params.lang)
   const messages = await getMessages(params.lang)
 

apps/scandic-web/app/api/hoteldata/route.ts

@@ -25,7 +25,8 @@ export async function GET(request: NextRequest) {
       throw new Error("[WARMUP] Invalid language provided")
     }
 
-    const hotels = await serverClient().hotel.hotels.getDestinationsMapData({
+    const caller = await serverClient()
+    const hotels = await caller.hotel.hotels.getDestinationsMapData({
       lang: parsedLang.data,
       warmup: true,
     })

apps/scandic-web/app/api/web/add-card-callback/[lang]/route.ts

@@ -7,8 +7,9 @@ import type { NextRequest } from "next/server"
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { lang: string } }
+  props: { params: Promise<{ lang: string }> }
 ) {
+  const params = await props.params
   const publicURL = getPublicURL(request)
 
   console.log(`[add-card] callback started`)
@@ -24,7 +25,8 @@ export async function GET(
 
     if (success) {
       if (trxId) {
-        const saveCardSuccess = await serverClient().user.creditCard.save({
+        const caller = await serverClient()
+        const saveCardSuccess = await caller.user.creditCard.save({
           transactionId: trxId,
         })
 

apps/scandic-web/app/api/web/revalidate/hotel/route.ts

@@ -26,7 +26,7 @@ const validateJsonBody = z.object({
 
 export async function POST(request: NextRequest) {
   try {
-    const headersList = headers()
+    const headersList = await headers()
     const secret = headersList.get("x-revalidate-secret")
 
     if (secret !== env.REVALIDATE_SECRET) {

apps/scandic-web/app/api/web/revalidate/loyaltyConfig/route.ts

@@ -31,7 +31,7 @@ const validateJsonBody = z.object({
 
 export async function POST(request: NextRequest) {
   try {
-    const headersList = headers()
+    const headersList = await headers()
     const secret = headersList.get("x-revalidate-secret")
 
     if (secret !== env.REVALIDATE_SECRET) {

apps/scandic-web/app/api/web/revalidate/manually/route.ts

@@ -13,7 +13,7 @@ import type { Lang } from "@/constants/languages"
 // purging your cache for new (and old) requests
 export async function POST() {
   try {
-    const headersList = headers()
+    const headersList = await headers()
     const secret = headersList.get("x-revalidate-secret")
 
     if (secret !== env.REVALIDATE_SECRET) {

apps/scandic-web/app/api/web/revalidate/route.ts

@@ -45,7 +45,7 @@ const validateJsonBody = z.object({
 
 export async function POST(request: NextRequest) {
   try {
-    const headersList = headers()
+    const headersList = await headers()
     const secret = headersList.get("x-revalidate-secret")
 
     if (secret !== env.REVALIDATE_SECRET) {

apps/scandic-web/app/sitemap/[sitemapId]/route.ts

@@ -10,13 +10,14 @@ export const dynamic = "force-dynamic"
 
 export async function GET(
   _request: NextRequest,
-  context: { params: { sitemapId: string } }
+  context: { params: Promise<{ sitemapId: string }> }
 ) {
   if (env.NEW_SITE_LIVE_STATUS !== "ALL_LANGUAGES_LIVE") {
     return notFound()
   }
 
-  const sitemapId = context.params.sitemapId
+  const params = await context.params
+  const sitemapId = params.sitemapId
 
   console.log("[SITEMAP] Fetching sitemap by ID", sitemapId)
 

apps/scandic-web/components/Auth/TokenRefresher.tsx

@@ -24,7 +24,7 @@ export function SessionRefresher() {
   const session = useSession()
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const timeoutId = useRef<ReturnType<typeof setTimeout>>()
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
 
   // Simple inactivity control. Reset when the URL changes.
   const stopPreRefreshAt = useMemo(

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -18,7 +18,8 @@ import type { LevelCardProps } from "@/types/components/overviewTable"
 export default async function LoyaltyLevels({
   dynamic_content,
 }: LoyaltyLevelsProps) {
-  const uniqueLevels = await serverClient().contentstack.rewards.all({
+  const caller = await serverClient()
+  const uniqueLevels = await caller.contentstack.rewards.all({
     unique: true,
   })
 

apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx

@@ -18,7 +18,8 @@ export default async function ExpiringPoints({ user }: UserProps) {
   }
   const d = dt(membership.pointsExpiryDate)
 
-  const dateFormat = getLang() == Lang.fi ? "DD.MM.YYYY" : "YYYY-MM-DD"
+  const lang = await getLang()
+  const dateFormat = lang == Lang.fi ? "DD.MM.YYYY" : "YYYY-MM-DD"
 
   return (
     <section>

apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/Points/index.tsx

@@ -14,9 +14,10 @@ export default async function Points({ user }: UserProps) {
 
   const membership = user.loyalty ? getFriendsMembership(user.loyalty) : null
 
+  const caller = await serverClient()
   const nextLevel =
     membership?.nextLevel && MembershipLevelEnum[membership.nextLevel]
-      ? await serverClient().contentstack.loyaltyLevels.byLevel({
+      ? await caller.contentstack.loyaltyLevels.byLevel({
           level: MembershipLevelEnum[membership.nextLevel],
         })
       : null

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -9,8 +9,9 @@ import type { OverviewTableProps } from "@/types/components/blocks/dynamicConten
 export default async function OverviewTable({
   dynamic_content,
 }: OverviewTableProps) {
+  const caller = await serverClient()
   const [levels, membershipLevel] = await Promise.all([
-    serverClient().contentstack.rewards.all(),
+    caller.contentstack.rewards.all(),
     getMembershipLevelSafely(),
   ])
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -29,7 +29,8 @@ export default async function NextLevelRewardsBlock({
     return null
   }
 
-  const nextLevelRewards = await serverClient().contentstack.rewards.byLevel({
+  const caller = await serverClient()
+  const nextLevelRewards = await caller.contentstack.rewards.byLevel({
     level_id: MembershipLevelEnum[membershipLevel?.nextLevel],
     unique: true,
   })

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx

@@ -27,7 +27,7 @@ export default async function SASTransferPoints({
     return null
   }
 
-  const lang = getLang()
+  const lang = await getLang()
 
   return (
     <SectionContainer>

apps/scandic-web/components/Blocks/DynamicContent/SASTierComparison/index.tsx

@@ -10,8 +10,9 @@ export default async function SASTierComparisonBlock({
   title,
   preamble,
 }: SASTierComparisonBlockProps) {
+  const caller = await serverClient()
   const tierComparison =
-    await serverClient().contentstack.partner.getSasTierComparison()
+    await caller.contentstack.partner.getSasTierComparison()
 
   if (!tierComparison) return null
 

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx

@@ -13,7 +13,8 @@ export default async function PreviousStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialPreviousStays = await serverClient().user.stays.previous({
+  const caller = await serverClient()
+  const initialPreviousStays = await caller.user.stays.previous({
     limit: 6,
   })
 

apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -12,7 +12,7 @@ import styles from "./emptyUpcomingStays.module.css"
 
 export default async function EmptyUpcomingStaysBlock() {
   const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()
   const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
 
   const href = !env.isLangLive(lang)

apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/index.tsx

@@ -15,7 +15,8 @@ export default async function SoonestStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const upcomingStays = await serverClient().user.stays.upcoming({ limit: 3 })
+  const caller = await serverClient()
+  const upcomingStays = await caller.user.stays.upcoming({ limit: 3 })
   if (!upcomingStays?.data) {
     return null
   }

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -12,7 +12,7 @@ import styles from "./emptyUpcomingStays.module.css"
 
 export default async function EmptyUpcomingStaysBlock() {
   const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()
   const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
 
   const href = !env.isLangLive(lang)

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx

@@ -16,7 +16,8 @@ export default async function UpcomingStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialUpcomingStays = await serverClient().user.stays.upcoming({
+  const caller = await serverClient()
+  const initialUpcomingStays = await caller.user.stays.upcoming({
     limit: 6,
   })
 

apps/scandic-web/components/Breadcrumbs/index.tsx

@@ -14,7 +14,8 @@ export default async function Breadcrumbs({
   size,
   subpageTitle,
 }: Props) {
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
+  const caller = await serverClient()
+  const breadcrumbs = await caller.contentstack.breadcrumbs.get()
   if (!breadcrumbs?.length) {
     return null
   }

apps/scandic-web/components/ContentType/HotelMapPage/index.tsx

@@ -12,7 +12,7 @@ interface HotelMapPageProps {
 }
 
 export default async function HotelMapPage({ hotelId }: HotelMapPageProps) {
-  const lang = getLang()
+  const lang = await getLang()
   const hotelPageData = await getHotelPage()
   const hotelData = await getHotel({
     hotelId,

apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx

@@ -32,7 +32,7 @@ export default async function TripAdvisorLink({
 
   const hasTripAdvisorIframeSrc = !!reviews.widgetScriptEmbedUrlIframe
   const tripAdvisorHref = hasTripAdvisorIframeSrc
-    ? appendSlugToPathname("reviews")
+    ? await appendSlugToPathname("reviews")
     : null
 
   if (!tripAdvisorHref) {

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx

@@ -23,7 +23,7 @@ export default async function ContactInformation({
   ecoLabels,
 }: ContactInformationProps) {
   const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()
   const { latitude, longitude } = coordinates
   const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`
 

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx

@@ -21,8 +21,8 @@ export default async function AmenitiesSidePeek({
 }: AmenitiesSidePeekProps) {
   const intl = await getIntl()
 
-  const parkingPageHref = appendSlugToPathname(parking.parkingPageUrl)
+  const parkingPageHref = await appendSlugToPathname(parking.parkingPageUrl)
-  const accessibilityPageHref = appendSlugToPathname(
+  const accessibilityPageHref = await appendSlugToPathname(
     accessibility.accessibilityPageUrl
   )
 

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx

@@ -23,7 +23,7 @@ export default async function MeetingsAndConferencesSidePeek({
   const intl = await getIntl()
   const { seatingText, roomText } = await getConferenceRoomTexts(meetingRooms)
   const visibleImages = meetingFacilities?.heroImages.slice(0, 2)
-  const meetingPageHref = appendSlugToPathname(meetingPageUrl)
+  const meetingPageHref = await appendSlugToPathname(meetingPageUrl)
 
   return (
     <SidePeek

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -29,7 +29,7 @@ export default async function RestaurantBarItem({
   const visibleImages = restaurant.content.images.slice(0, 2)
 
   const restaurantPageHref = restaurantPage
-    ? appendSlugToPathname(restaurant.nameInUrl)
+    ? await appendSlugToPathname(restaurant.nameInUrl)
     : null
 
   return (

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx

@@ -26,7 +26,7 @@ export default async function RoomSidePeek({
   hotelId,
   room,
 }: RoomSidePeekProps) {
-  const lang = getLang()
+  const lang = await getLang()
   const intl = await getIntl()
   const { roomSize, totalOccupancy, descriptions, images } = room
   const roomDescription = descriptions.medium

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx

@@ -16,7 +16,9 @@ export default async function WellnessAndExerciseSidePeek({
   spaPage,
 }: WellnessAndExerciseSidePeekProps) {
   const intl = await getIntl()
-  const wellnessExercisePageHref = appendSlugToPathname(wellnessExercisePageUrl)
+  const wellnessExercisePageHref = await appendSlugToPathname(
+    wellnessExercisePageUrl
+  )
 
   return (
     <SidePeek

apps/scandic-web/components/ContentType/HotelPage/data.tsx

@@ -9,6 +9,8 @@ import type { MaterialIconSetIconProps } from "@scandic-hotels/design-system/Ico
 
 import { FacilityEnum } from "@/types/enums/facilities"
 
+import type { JSX } from "react";
+
 const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.AccessibleBathingControls]: IconName.StarFilled,
   [FacilityEnum.AccessibleBathtubs]: IconName.StarFilled,

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -43,7 +43,7 @@ import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 
 export default async function HotelPage({ hotelId }: HotelPageProps) {
-  const lang = getLang()
+  const lang = await getLang()
 
   void getHotelPage()
   void getHotel({

apps/scandic-web/components/ContentType/HotelSubpage/MeetingsSubpage/index.tsx

@@ -30,7 +30,7 @@ export default async function MeetingsSubpage({
   additionalData,
 }: MeetingsSubpageProps) {
   const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()
   const heading = intl.formatMessage({
     defaultMessage: "Meetings, Conferences & Events",
   })

apps/scandic-web/components/ContentType/HotelSubpage/index.tsx

@@ -18,7 +18,7 @@ export default async function HotelSubpage({
   hotelId,
   subpage,
 }: HotelSubpageProps) {
-  const lang = getLang()
+  const lang = await getLang()
   const [hotelPageData, hotelData] = await Promise.all([
     getHotelPage(),
     getHotel({ hotelId, language: lang, isCardOnlyPayment: false }),

apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx

@@ -14,7 +14,8 @@ import TrackingSDK from "@/components/TrackingSDK"
 import styles from "./loyaltyPage.module.css"
 
 export default async function LoyaltyPage() {
-  const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
+  const caller = await serverClient()
+  const loyaltyPageRes = await caller.contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
     return null

apps/scandic-web/components/ContentType/StaticPages/CollectionPage/index.tsx

@@ -3,8 +3,8 @@ import { serverClient } from "@/lib/trpc/server"
 import StaticPage from ".."
 
 export default async function CollectionPage() {
-  const collectionPageRes =
+  const caller = await serverClient()
-    await serverClient().contentstack.collectionPage.get()
+  const collectionPageRes = await caller.contentstack.collectionPage.get()
 
   if (!collectionPageRes) {
     return null

apps/scandic-web/components/ContentType/StaticPages/ContentPage/index.tsx

@@ -9,7 +9,8 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
 import StaticPage from ".."
 
 export default async function ContentPage() {
-  const contentPageRes = await serverClient().contentstack.contentPage.get()
+  const caller = await serverClient()
+  const contentPageRes = await caller.contentstack.contentPage.get()
 
   if (!contentPageRes) {
     return null

apps/scandic-web/components/Current/Footer/index.tsx

@@ -10,7 +10,8 @@ import Navigation from "./Navigation"
 import styles from "./footer.module.css"
 
 export default async function Footer() {
-  const footerData = await getCurrentFooter(getLang())
+  const lang = await getLang()
+  const footerData = await getCurrentFooter(lang)
   if (!footerData) {
     return null
   }

apps/scandic-web/components/Current/Header/TopMenu/index.tsx

@@ -24,6 +24,8 @@ export default async function TopMenu({
 }: TopMenuProps) {
   const intl = await getIntl()
   const user = await getName()
+  const lang = await getLang()
+
   return (
     <div className={styles.topMenu}>
       <div className={styles.container}>
@@ -48,7 +50,7 @@ export default async function TopMenu({
               <>
                 {user ? (
                   <Link
-                    href={overview[getLang()]}
+                    href={overview[lang]}
                     className={styles.sessionLink}
                     prefetch={false}
                   >
@@ -57,7 +59,7 @@ export default async function TopMenu({
                 ) : null}
                 <div className={styles.loginSeparator} />
                 <Link
-                  href={logout[getLang()]}
+                  href={logout[lang]}
                   className={styles.sessionLink}
                   prefetch={false}
                 >

apps/scandic-web/components/Current/Header/index.tsx

@@ -13,14 +13,14 @@ import TopMenu from "./TopMenu"
 import styles from "./header.module.css"
 
 export default async function Header() {
-  const lang = getLang()
+  const lang = await getLang()
   const [data, user] = await Promise.all([getCurrentHeader(lang), getName()])
 
   if (!data?.header) {
     return null
   }
 
-  const homeHref = homeHrefs[env.NODE_ENV][getLang()]
+  const homeHref = homeHrefs[env.NODE_ENV][lang]
   const { frontpageLinkText, logo, menu, topMenu } = data.header
 
   const topMenuMobileLinks = topMenu.links

apps/scandic-web/components/Current/LangPopup/index.tsx

@@ -6,8 +6,8 @@ import { Lang, localeToLang } from "@/constants/languages"
 
 import { getLang } from "@/i18n/serverContext"
 
-export default function LangPopup() {
+export default async function LangPopup() {
-  const headersList = headers()
+  const headersList = await headers()
   const preferedLang = headersList.get("Accept-Language") ?? ""
 
   const possibleLangs = Object.keys(localeToLang)
@@ -18,7 +18,8 @@ export default function LangPopup() {
 
   const langOfChoice: Lang = localeToLang[preferedLang as Lang]
 
-  if (langOfChoice === getLang()) {
+  const lang = await getLang()
+  if (langOfChoice === lang) {
     return null
   }
 

apps/scandic-web/components/Current/NotFound/index.tsx

@@ -6,8 +6,8 @@ import { texts } from "./Texts"
 
 import styles from "./notFound.module.css"
 
-export default function NotFound() {
+export default async function NotFound() {
-  const lang = getLang()
+  const lang = await getLang()
   const infoTexts = texts[lang]
 
   return (

apps/scandic-web/components/DeprecatedJsonToHtml/utils.tsx

@@ -1,3 +1,5 @@
+import { cloneElement } from "react"
+
 import { renderOptions } from "./renderOptions"
 
 import type { EmbedByUid } from "@/types/components/deprecatedjsontohtml"
@@ -40,10 +42,10 @@ export function nodeChildrenToHtml(
       if (!element) {
         return null
       }
-      return {
+
-        ...element,
+      return cloneElement(element, {
         key: `child-rte-${i}`,
-      }
+      })
     })
     .filter(Boolean)
 }

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard/index.tsx

@@ -11,7 +11,7 @@ import styles from "./authCard.module.css"
 export default async function EmployeeBenefitsAuthCard() {
   const intl = await getIntl()
 
-  const lang = getLang()
+  const lang = await getLang()
 
   const isLoggedIn = await isLoggedInUser()
 

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx

@@ -17,7 +17,7 @@ import styles from "./callToActions.module.css"
 export default async function EmployeeBenefitsCallToActions() {
   const session = await auth()
   const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()
 
   if (!isValidSession(session)) {
     return (

apps/scandic-web/components/Footer/Details/index.tsx

@@ -14,7 +14,7 @@ import SocialLink from "./SocialLink"
 import styles from "./details.module.css"
 
 export default async function FooterDetails() {
-  const lang = getLang()
+  const lang = await getLang()
   const intl = await getIntl()
   // preloaded
   const footer = await getFooter()
@@ -72,7 +72,7 @@ export default async function FooterDetails() {
 }
 
 export async function FooterDetailsSkeleton() {
-  const lang = getLang()
+  const lang = await getLang()
   const intl = await getIntl()
   const currentYear = new Date().getFullYear()
 

apps/scandic-web/components/Footer/index.tsx

@@ -13,8 +13,8 @@ export function preload() {
   void getFooter()
 }
 
-export default function Footer() {
+export default async function Footer() {
-  const lang = getLang()
+  const lang = await getLang()
   if (!env.isLangLive(lang)) {
     return <CurrentFooter />
   }

apps/scandic-web/components/Header/TopMenu/index.tsx

@@ -29,7 +29,7 @@ export default async function TopMenu() {
     return null
   }
 
-  const lang = getLang()
+  const lang = await getLang()
   const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
   const findMyBookingUrl = !env.isLangLive(lang)
     ? getCurrentWebUrl({

apps/scandic-web/components/Header/index.tsx

@@ -12,10 +12,10 @@ import TopMenu, { TopMenuSkeleton } from "./TopMenu"
 
 import styles from "./header.module.css"
 
-export default function Header() {
+export default async function Header() {
   void getName()
 
-  const lang = getLang()
+  const lang = await getLang()
   if (!env.isLangLive(lang)) {
     return (
       <Suspense fallback={<HeaderFallback />}>

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx

@@ -13,7 +13,7 @@ import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectR
 
 export default async function Footer({ booking, room }: FooterProps) {
   const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()
 
   const petRoomPackage = booking.packages.find(
     (p) => p.code === RoomPackageCodeEnum.PET_ROOM

apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx

@@ -42,7 +42,8 @@ export async function Receipt({ refId }: { refId: string }) {
 
   const isLoggedIn = await isLoggedInUser()
 
-  const bv = cookies().get("bv")?.value
+  const cookieStore = await cookies()
+  const bv = cookieStore.get("bv")?.value
   let bookingConfirmation
   if (isLoggedIn) {
     bookingConfirmation = await getBookingConfirmation(refId)