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)/(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({
-  params,
-  searchParams,
-}: PageArgs<
-  LangParams,
-  {
-    RefId?: string
-  }
->) {
+export default async function BookingConfirmationPage(
+  props: PageArgs<LangParams, { RefId?: string }>
+) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   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({
-  params,
-  searchParams,
-}: PageArgs<
-  LangParams,
-  {
-    status?: PaymentCallbackStatusEnum
-    RefId?: string
-    confirmationNumber?: string
-    ancillary?: string
-  }
->) {
+export default async function GuaranteePaymentCallbackPage(
+  props: PageArgs<
+    LangParams,
+    {
+      status?: PaymentCallbackStatusEnum
+      RefId?: 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({
-  params,
-  searchParams,
-}: PageArgs<
-  LangParams,
-  {
-    status?: PaymentCallbackStatusEnum
-    confirmationNumber?: string
-    hotel?: string
-  }
->) {
+export default async function PaymentCallbackPage(
+  props: PageArgs<
+    LangParams,
+    {
+      status?: PaymentCallbackStatusEnum
+      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({
-  searchParams,
-}: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
+export default async function SelectHotelMapPage(
+  props: 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
-            searchParams={searchParams}
-            isAlternativeHotels
-          />
+          <SelectHotelMapContainer booking={booking} 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({
-  params,
-  searchParams,
-}: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
-  setLang(params.lang)
-  const searchDetails = await getHotelSearchDetails({ searchParams }, true)
+export default async function AlternativeHotelsPage(
+  props: PageArgs<LangParams, AlternativeHotelsSearchParams>
+) {
+  const searchParams = await props.searchParams
+  const params = await props.params
+
+  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({
-  params: { lang },
-  searchParams,
-}: PageArgs<LangParams, SelectRateSearchParams>) {
+export default async function DetailsPage(
+  props: 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({
-  searchParams,
-}: PageArgs<LangParams, SelectHotelSearchParams>) {
+export default async function SelectHotelMapPage(
+  props: 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({
-  params,
-  searchParams,
-}: PageArgs<LangParams, SelectHotelSearchParams>) {
-  setLang(params.lang)
-  const searchDetails = await getHotelSearchDetails({ searchParams })
+export default async function SelectHotelPage(
+  props: PageArgs<LangParams, SelectHotelSearchParams>
+) {
+  const searchParams = await props.searchParams
+  const params = await props.params
+
+  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({
-  params,
-  searchParams,
-}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
+export default async function SelectRatePage(
+  props: 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({
-  params,
-  searchParams,
-}: PageArgs<LangParams, { RefId?: string }>) {
+export default async function MyStay(
+  props: 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() {
-  const lang = getLang()
+export default async function Tracking() {
+  const lang = await getLang()
 
   const pageTrackingData: TrackingSDKPageData = {
     channel: TrackingChannelEnum.hotels,