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
2025-06-02 11:11:50 +00:00
parent 47abd7d5ef
commit cbf9e7b7c2
188 changed files with 4883 additions and 1023 deletions
--- a/apps/scandic-web/components/Auth/TokenRefresher.tsx
+++ b/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(
--- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/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,
  })

--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/ExpiringPoints/index.tsx
+++ b/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>
--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/Points/index.tsx
+++ b/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
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/index.tsx
+++ b/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(),
  ])

--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
+++ b/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,
  })
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx
+++ b/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>
--- a/apps/scandic-web/components/Blocks/DynamicContent/SASTierComparison/index.tsx
+++ b/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

--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
+++ b/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,
  })

--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx
+++ b/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)
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/index.tsx
+++ b/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
  }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/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)
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
+++ b/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,
  })

--- a/apps/scandic-web/components/Breadcrumbs/index.tsx
+++ b/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
  }
--- a/apps/scandic-web/components/ContentType/HotelMapPage/index.tsx
+++ b/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,
--- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx
+++ b/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) {
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
+++ b/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}`

--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
+++ b/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 accessibilityPageHref = appendSlugToPathname(
+  const parkingPageHref = await appendSlugToPathname(parking.parkingPageUrl)
+  const accessibilityPageHref = await appendSlugToPathname(
    accessibility.accessibilityPageUrl
  )

--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
+++ b/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
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx
+++ b/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 (
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
+++ b/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
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
+++ b/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
--- a/apps/scandic-web/components/ContentType/HotelPage/data.tsx
+++ b/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,
--- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx
+++ b/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({
--- a/apps/scandic-web/components/ContentType/HotelSubpage/MeetingsSubpage/index.tsx
+++ b/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",
  })
--- a/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx
+++ b/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 }),
--- a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
+++ b/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
--- a/apps/scandic-web/components/ContentType/StaticPages/CollectionPage/index.tsx
+++ b/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 =
-    await serverClient().contentstack.collectionPage.get()
+  const caller = await serverClient()
+  const collectionPageRes = await caller.contentstack.collectionPage.get()

  if (!collectionPageRes) {
    return null
--- a/apps/scandic-web/components/ContentType/StaticPages/ContentPage/index.tsx
+++ b/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
--- a/apps/scandic-web/components/Current/Footer/index.tsx
+++ b/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
  }
--- a/apps/scandic-web/components/Current/Header/TopMenu/index.tsx
+++ b/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}
                >
--- a/apps/scandic-web/components/Current/Header/index.tsx
+++ b/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
--- a/apps/scandic-web/components/Current/LangPopup/index.tsx
+++ b/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() {
-  const headersList = headers()
+export default async function LangPopup() {
+  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
  }

--- a/apps/scandic-web/components/Current/NotFound/index.tsx
+++ b/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() {
-  const lang = getLang()
+export default async function NotFound() {
+  const lang = await getLang()
  const infoTexts = texts[lang]

  return (
--- a/apps/scandic-web/components/DeprecatedJsonToHtml/utils.tsx
+++ b/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)
 }
--- a/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard/index.tsx
+++ b/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()

--- a/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx
+++ b/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 (
--- a/apps/scandic-web/components/Footer/Details/index.tsx
+++ b/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()

--- a/apps/scandic-web/components/Footer/index.tsx
+++ b/apps/scandic-web/components/Footer/index.tsx
@@ -13,8 +13,8 @@ export function preload() {
  void getFooter()
 }

-export default function Footer() {
-  const lang = getLang()
+export default async function Footer() {
+  const lang = await getLang()
  if (!env.isLangLive(lang)) {
    return <CurrentFooter />
  }
--- a/apps/scandic-web/components/Header/TopMenu/index.tsx
+++ b/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({
--- a/apps/scandic-web/components/Header/index.tsx
+++ b/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 />}>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx
+++ b/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
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
+++ b/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)
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/tracking.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/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,
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/NoAvailabilityAlert.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/NoAvailabilityAlert.tsx
@@ -16,7 +16,7 @@ export default async function NoAvailabilityAlert({
  operaId,
 }: NoAvailabilityAlertProp) {
  const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()

  if (bookingCode && isBookingCodeRateNotAvailable) {
    const bookingCodeText = intl.formatMessage(
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx
@@ -14,24 +14,16 @@ import { getTracking } from "./tracking"
 import SelectHotelMap from "."

 import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map"
-import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"

 export async function SelectHotelMapContainer({
-  searchParams,
+  booking,
  isAlternativeHotels,
 }: SelectHotelMapContainerProps) {
-  const lang = getLang()
+  const lang = await getLang()
  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
  const getHotelSearchDetailsPromise = safeTry(
-    getHotelSearchDetails(
-      {
-        searchParams: searchParams as SelectHotelSearchParams & {
-          [key: string]: string
-        },
-      },
-      isAlternativeHotels
-    )
+    getHotelSearchDetails(booking, isAlternativeHotels)
  )

  const [searchDetails] = await getHotelSearchDetailsPromise
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts
@@ -24,6 +24,7 @@ import type {
  HotelLocation,
  Location,
 } from "@/types/trpc/routers/hotel/locations"
+import type { SelectHotelParams } from "@/utils/url"

 interface AvailabilityResponse {
  availability: HotelsAvailabilityItem[]
@@ -39,7 +40,7 @@ type Result = AvailabilityResponse | null
 type SettledResult = PromiseSettledResult<Result>[]

 async function enhanceHotels(hotels: HotelsAvailabilityItem[]) {
-  const language = getLang()
+  const language = await getLang()
  return await Promise.allSettled(
    hotels.map(async (availability) => {
      const hotelData = await getHotel({
@@ -65,7 +66,8 @@ async function fetchAlternativeHotels(
  hotelId: string,
  input: AlternativeHotelsAvailabilityInput
 ) {
-  const alternativeHotelIds = await serverClient().hotel.nearbyHotelIds({
+  const caller = await serverClient()
+  const alternativeHotelIds = await caller.hotel.nearbyHotelIds({
    hotelId,
  })

@@ -73,20 +75,20 @@ async function fetchAlternativeHotels(
    return null
  }

-  return await serverClient().hotel.availability.hotelsByHotelIds({
+  return await caller.hotel.availability.hotelsByHotelIds({
    ...input,
    hotelIds: alternativeHotelIds,
  })
 }

 async function fetchAvailableHotels(input: AvailabilityInput) {
-  return await serverClient().hotel.availability.hotelsByCity(input)
+  const caller = await serverClient()
+  return await caller.hotel.availability.hotelsByCity(input)
 }

 async function fetchBookingCodeAvailableHotels(input: AvailabilityInput) {
-  return await serverClient().hotel.availability.hotelsByCityWithBookingCode(
-    input
-  )
+  const caller = await serverClient()
+  return await caller.hotel.availability.hotelsByCityWithBookingCode(input)
 }

 function getFulfilledResponses<T>(result: PromiseSettledResult<T | null>[]) {
@@ -161,7 +163,9 @@ function sortAndFilterHotelsByAvailability(
 }

 export async function getHotels(
-  booking: SelectHotelSearchParams | AlternativeHotelsSearchParams,
+  booking: SelectHotelParams<
+    SelectHotelSearchParams | AlternativeHotelsSearchParams
+  >,
  isAlternativeFor: HotelLocation | null,
  bookingCode: string | undefined,
  city: Location,
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx
@@ -43,18 +43,18 @@ export default async function SelectHotel({

  const isBookingCodeRateAvailable = bookingCode
    ? hotels.some(
-      (hotel) =>
-        hotel.availability.bookingCode &&
-        hotel.availability.status === "Available"
-    )
+        (hotel) =>
+          hotel.availability.bookingCode &&
+          hotel.availability.status === "Available"
+      )
    : false

  const isFullPriceHotelAvailable = bookingCode
    ? hotels?.some(
-      (hotel) =>
-        !hotel.availability.bookingCode &&
-        hotel.availability.status === "Available"
-    )
+        (hotel) =>
+          !hotel.availability.bookingCode &&
+          hotel.availability.status === "Available"
+      )
    : false

  // Special rates (corporate cheque, voucher and reward nights) will not have regular rate hotels availability
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/utils.ts
@@ -1,4 +1,4 @@
-import type { MaterialSymbolProps } from "react-material-symbols"
+import type { MaterialSymbolProps } from "@scandic-hotels/design-system/Icons/MaterialIcon/MaterialSymbol"

 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { PackageEnum } from "@/types/requests/packages"
--- a/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx
@@ -6,7 +6,6 @@ import { getHotel } from "@/lib/trpc/memoizedRequests"

 import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
 import { RoomsContainer } from "@/components/HotelReservation/SelectRate/RoomsContainer"
-import { setLang } from "@/i18n/serverContext"
 import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"

 import FnFNotAllowedAlert from "../FnFNotAllowedAlert/FnFNotAllowedAlert"
@@ -14,14 +13,17 @@ import AvailabilityError from "./AvailabilityError"
 import Tracking from "./Tracking"

 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
-import type { LangParams, PageArgs } from "@/types/params"
+import type { Lang } from "@/constants/languages"
+import type { SelectHotelParams } from "@/utils/url"

 export default async function SelectRatePage({
-  params,
-  searchParams,
-}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
-  setLang(params.lang)
-  const searchDetails = await getHotelSearchDetails({ searchParams })
+  lang,
+  booking,
+}: {
+  lang: Lang
+  booking: SelectHotelParams<SelectRateSearchParams>
+}) {
+  const searchDetails = await getHotelSearchDetails(booking)
  if (!searchDetails?.hotel) {
    return notFound()
  }
@@ -31,7 +33,7 @@ export default async function SelectRatePage({
  const hotelData = await getHotel({
    hotelId: hotel.id,
    isCardOnlyPayment: false,
-    language: params.lang,
+    language: lang,
  })

  if (!hotelData) {
@@ -40,7 +42,7 @@ export default async function SelectRatePage({

  let isInValidFNF = false
  if (bookingCode && FamilyAndFriendsCodes.includes(bookingCode)) {
-    const cookieStore = cookies()
+    const cookieStore = await cookies()
    isInValidFNF = cookieStore.get("sc")?.value !== "1"
  }
  return (
--- a/apps/scandic-web/components/HotelReservation/utils/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/utils/index.tsx
@@ -13,6 +13,8 @@ import {
 import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { Packages } from "@/types/requests/packages"

+import type { JSX } from "react";
+
 interface IconForFeatureCodeProps {
  featureCode: RoomPackageCodes
 }
--- a/apps/scandic-web/components/Icons/IconByIconName.tsx
+++ b/apps/scandic-web/components/Icons/IconByIconName.tsx
@@ -31,6 +31,8 @@ import type {
  NucleoIconProps,
 } from "@scandic-hotels/design-system/Icons"

+import type { JSX } from "react";
+
 interface IconByIconNameProps {
  iconName: IconName | null
 }
--- a/apps/scandic-web/components/JsonToHtml/utils.tsx
+++ b/apps/scandic-web/components/JsonToHtml/utils.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { cloneElement } from "react"

 import { renderOptions } from "./renderOptions"

@@ -44,10 +44,10 @@ export function nodeChildrenToHtml(
      if (!element) {
        return null
      }
-      return {
-        ...element,
+
+      return cloneElement(element, {
        key: `child-rte-${i}`,
-      }
+      })
    })
    .filter(Boolean)
 }
--- a/apps/scandic-web/components/Modal/index.tsx
+++ b/apps/scandic-web/components/Modal/index.tsx
@@ -71,7 +71,11 @@ function InnerModal({
      className={styles.overlay}
      initial="hidden"
      isDismissable
-      isExiting={animation === AnimationStateEnum.hidden}
+      // TODO: Enabling this causes the modal to never unmount.
+      // Seems to be an issue with react-aria-components, see https://github.com/adobe/react-spectrum/issues/7563.
+      // Exit animations can probably be fixed by rewriting to a solution similar to
+      // https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html.
+      // isExiting={animation === AnimationStateEnum.hidden}
      onAnimationComplete={modalStateHandler}
      variants={fade}
      isOpen={isOpen}
--- a/apps/scandic-web/components/Modal/modal.ts
+++ b/apps/scandic-web/components/Modal/modal.ts
@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction } from "react"
+import type { Dispatch, SetStateAction, JSX } from "react";

 export enum AnimationStateEnum {
  unmounted = "unmounted",
--- a/apps/scandic-web/components/MyPages/Profile/CreditCards/index.tsx
+++ b/apps/scandic-web/components/MyPages/Profile/CreditCards/index.tsx
@@ -10,7 +10,8 @@ import styles from "./creditCards.module.css"

 export default async function CreditCardSlot() {
  const intl = await getIntl()
-  const creditCards = await serverClient().user.creditCards()
+  const caller = await serverClient()
+  const creditCards = await caller.user.creditCards()

  return (
    <section className={styles.container}>
--- a/apps/scandic-web/components/MyPages/Profile/index.tsx
+++ b/apps/scandic-web/components/MyPages/Profile/index.tsx
@@ -25,7 +25,7 @@ export default async function Profile() {
  }

  const intl = await getIntl()
-  const lang = getLang()
+  const lang = await getLang()

  const addressParts = []
  if (user.address.streetAddress) {
--- a/apps/scandic-web/components/MyPages/Sidebar/index.tsx
+++ b/apps/scandic-web/components/MyPages/Sidebar/index.tsx
@@ -40,7 +40,8 @@ export default async function SidebarMyPages() {
 }

 async function PrimaryLinks() {
-  const nav = await serverClient().navigation.myPages({})
+  const caller = await serverClient()
+  const nav = await caller.navigation.myPages({})

  return (
    <>
@@ -66,9 +67,10 @@ async function PrimaryLinks() {
 }

 async function SecondaryLinks() {
-  const lang = getLang()
+  const lang = await getLang()

-  const nav = await serverClient().navigation.myPages({})
+  const caller = await serverClient()
+  const nav = await caller.navigation.myPages({})
  const intl = await getIntl()

  return (
--- a/apps/scandic-web/components/MyPages/Surprises/index.tsx
+++ b/apps/scandic-web/components/MyPages/Surprises/index.tsx
@@ -8,7 +8,8 @@ export default async function Surprises() {
    return null
  }

-  const surprises = await serverClient().contentstack.rewards.surprises()
+  const caller = await serverClient()
+  const surprises = await caller.contentstack.rewards.surprises()

  if (!surprises) {
    return null
--- a/apps/scandic-web/components/ProtectedLayout.tsx
+++ b/apps/scandic-web/components/ProtectedLayout.tsx
@@ -16,12 +16,13 @@ export async function ProtectedLayout({ children }: React.PropsWithChildren) {
   *  Fallback to make sure every route nested in the
   *  protected route group is actually protected.
   */
-  const h = headers()
+  const headersList = await headers()
+  const lang = await getLang()
  const redirectTo = encodeURIComponent(
-    h.get("x-url") ?? h.get("x-pathname") ?? overview[getLang()]
+    headersList.get("x-url") ?? headersList.get("x-pathname") ?? overview[lang]
  )

-  const redirectURL = `/${getLang()}/login?redirectTo=${redirectTo}`
+  const redirectURL = `/${lang}/login?redirectTo=${redirectTo}`

  if (!isValidSession(session)) {
    console.log(`[layout:protected] no session, redirecting to: ${redirectURL}`)
--- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/bedIcon.ts
+++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/bedIcon.ts
@@ -1,4 +1,4 @@
-import type { MaterialSymbolProps } from "react-material-symbols"
+import type { MaterialSymbolProps } from "@scandic-hotels/design-system/Icons/MaterialIcon/MaterialSymbol"

 export function getBedIconName(name: string): MaterialSymbolProps["icon"] {
  const iconMappings = [
--- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/facilityIcon.tsx
+++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/facilityIcon.tsx
@@ -35,7 +35,9 @@ import type {
  IconProps,
  NucleoIconProps,
 } from "@scandic-hotels/design-system/Icons"
-import type { MaterialSymbolProps } from "react-material-symbols"
+import type { MaterialSymbolProps } from "@scandic-hotels/design-system/Icons/MaterialIcon/MaterialSymbol"
+
+import type { JSX } from "react"

 interface FacilityIconProps {
  name: string | undefined
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -15,7 +15,8 @@ import styles from "./contactRow.module.css"
 import type { ContactRowProps } from "@/types/components/sidebar/joinLoyaltyContact"

 export default async function ContactRow({ contact }: ContactRowProps) {
-  const data = await serverClient().contentstack.base.contact()
+  const caller = await serverClient()
+  const data = await caller.contentstack.base.contact()
  if (!data) {
    return null
  }
--- a/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
@@ -6,6 +6,8 @@ import {
 import { AlertTypeEnum } from "@/types/enums/alert"
 import type { AlertProps } from "./alert"

+import type { JSX } from "react";
+
 interface IconByAlertProps {
  alertType: AlertTypeEnum
  variant?: AlertProps["variant"]
--- a/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/types.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/types.ts
@@ -1,5 +1,7 @@
 import type { IconProps } from "@scandic-hotels/design-system/Icons"

+import type { JSX } from "react";
+
 export interface RadioCardProps
  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
  Icon?: (props: IconProps) => JSX.Element
--- a/apps/scandic-web/components/TempDesignSystem/Select/select.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Select/select.ts
@@ -13,7 +13,7 @@ export interface SelectProps
  showRadioButton?: boolean
  discreet?: boolean
  isNestedInModal?: boolean
-  optionsIcon?: ReactElement
+  optionsIcon?: ReactElement<any>
 }

 export type SelectPortalContainer = HTMLDivElement | undefined
--- a/apps/scandic-web/components/Webviews/AccountPage/Blocks.tsx
+++ b/apps/scandic-web/components/Webviews/AccountPage/Blocks.tsx
@@ -15,13 +15,14 @@ import type {
 import { BlocksEnums } from "@/types/enums/blocks"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"

-function DynamicComponent({ dynamic_content }: AccountPageContentProps) {
+async function DynamicComponent({ dynamic_content }: AccountPageContentProps) {
+  const lang = await getLang()
  const dynamicContent = {
    ...dynamic_content,
    link: dynamic_content.link
      ? {
          ...dynamic_content.link,
-          href: modWebviewLink(dynamic_content.link.href, getLang()),
+          href: await modWebviewLink(dynamic_content.link.href, lang),
        }
      : undefined,
  }
@@ -45,49 +46,54 @@ function DynamicComponent({ dynamic_content }: AccountPageContentProps) {
  }
 }

-export default function Content({ content }: ContentProps) {
+export default async function Content({ content }: ContentProps) {
+  const lang = await getLang()
  return (
    <>
-      {content.map((item, idx) => {
-        switch (item.typename) {
-          case BlocksEnums.block.DynamicContent:
-            return (
-              <DynamicComponent
-                key={`${item.dynamic_content.title}-${idx}`}
-                dynamic_content={item.dynamic_content}
-              />
-            )
-          case BlocksEnums.block.Shortcuts:
-            const shortcuts = item.shortcuts.shortcuts.map((shortcut) => {
-              return {
-                ...shortcut,
-                url: modWebviewLink(shortcut.url, getLang()),
-              }
-            })
-            return (
-              <ShortcutsList
-                key={`${item.shortcuts.title}-${idx}`}
-                shortcuts={shortcuts}
-                subtitle={item.shortcuts.subtitle}
-                title={item.shortcuts.title}
-                hasTwoColumns={item.shortcuts.hasTwoColumns}
-              />
-            )
-          case BlocksEnums.block.TextContent:
-            return (
-              <section key={`${item.__typename}-${idx}`}>
-                <JsonToHtml
-                  embeds={
-                    item.text_content.content.embedded_itemsConnection.edges
-                  }
-                  nodes={item.text_content.content.json.children}
+      {await Promise.all(
+        content.map(async (item, idx) => {
+          switch (item.typename) {
+            case BlocksEnums.block.DynamicContent:
+              return (
+                <DynamicComponent
+                  key={`${item.dynamic_content.title}-${idx}`}
+                  dynamic_content={item.dynamic_content}
                />
-              </section>
-            )
-          default:
-            return null
-        }
-      })}
+              )
+            case BlocksEnums.block.Shortcuts:
+              const shortcuts = await Promise.all(
+                item.shortcuts.shortcuts.map(async (shortcut) => {
+                  return {
+                    ...shortcut,
+                    url: await modWebviewLink(shortcut.url, lang),
+                  }
+                })
+              )
+              return (
+                <ShortcutsList
+                  key={`${item.shortcuts.title}-${idx}`}
+                  shortcuts={shortcuts}
+                  subtitle={item.shortcuts.subtitle}
+                  title={item.shortcuts.title}
+                  hasTwoColumns={item.shortcuts.hasTwoColumns}
+                />
+              )
+            case BlocksEnums.block.TextContent:
+              return (
+                <section key={`${item.__typename}-${idx}`}>
+                  <JsonToHtml
+                    embeds={
+                      item.text_content.content.embedded_itemsConnection.edges
+                    }
+                    nodes={item.text_content.content.json.children}
+                  />
+                </section>
+              )
+            default:
+              return null
+          }
+        })
+      )}
    </>
  )
 }
--- a/apps/scandic-web/components/Webviews/AccountPage/index.tsx
+++ b/apps/scandic-web/components/Webviews/AccountPage/index.tsx
@@ -11,7 +11,8 @@ import { getLang } from "@/i18n/serverContext"
 import styles from "./accountPage.module.css"

 export default async function AccountPage() {
-  const accountPageRes = await serverClient().contentstack.accountPage.get()
+  const caller = await serverClient()
+  const accountPageRes = await caller.contentstack.accountPage.get()

  if (!accountPageRes) {
    return null
@@ -19,8 +20,8 @@ export default async function AccountPage() {

  const { tracking, accountPage } = accountPageRes

-  const linkToOverview =
-    `/${getLang()}/webview${accountPage.url}` !== overview[getLang()]
+  const lang = await getLang()
+  const linkToOverview = `/${lang}/webview${accountPage.url}` !== overview[lang]

  return (
    <>
--- a/apps/scandic-web/components/Webviews/LinkToOverview/index.tsx
+++ b/apps/scandic-web/components/Webviews/LinkToOverview/index.tsx
@@ -11,9 +11,10 @@ import styles from "./linkToOverview.module.css"

 export default async function LinkToOverview() {
  const intl = await getIntl()
-  const searchParams = webviewSearchParams()
+  const searchParams = await webviewSearchParams()

-  const overviewHref = `${overview[getLang()]}?${searchParams.toString()}`
+  const lang = await getLang()
+  const overviewHref = `${overview[lang]}?${searchParams.toString()}`
  return (
    <Link className={styles.overviewLink} href={overviewHref}>
      <ArrowLeft height={20} width={20} />
--- a/apps/scandic-web/components/Webviews/LoyaltyPage/Blocks.tsx
+++ b/apps/scandic-web/components/Webviews/LoyaltyPage/Blocks.tsx
@@ -8,61 +8,67 @@ import { modWebviewLink } from "@/utils/webviews"
 import type { BlocksProps } from "@/types/components/blocks"
 import { BlocksEnums } from "@/types/enums/blocks"

-export default function Blocks({ blocks }: BlocksProps) {
-  return blocks.map((block, idx) => {
-    switch (block.typename) {
-      case BlocksEnums.block.CardsGrid:
-        return (
-          <CardsGrid
-            key={`${block.cards_grid.title}-${idx}`}
-            cards_grid={block.cards_grid}
-          />
-        )
-      case BlocksEnums.block.Content:
-        return (
-          <section key={`${block.__typename}-${idx}`}>
-            <JsonToHtml
-              nodes={block.content.json.children}
-              embeds={block.content.embedded_itemsConnection.edges}
-            />
-          </section>
-        )
-      case BlocksEnums.block.DynamicContent:
-        const dynamicContent = {
-          ...block.dynamic_content,
-          link: block.dynamic_content.link
-            ? {
-                ...block.dynamic_content.link,
-                href: modWebviewLink(
-                  block.dynamic_content.link.href,
-                  getLang()
-                ),
-              }
-            : undefined,
-        }
+export default async function Blocks({ blocks }: BlocksProps) {
+  const lang = await getLang()

-        return (
-          <DynamicContent
-            dynamic_content={dynamicContent}
-            key={`${block.dynamic_content.title}-${idx}`}
-          />
-        )
-      case BlocksEnums.block.Shortcuts:
-        const shortcuts = block.shortcuts.shortcuts.map((shortcut) => ({
-          ...shortcut,
-          url: modWebviewLink(shortcut.url, getLang()),
-        }))
-        return (
-          <ShortcutsList
-            key={`${block.shortcuts.title}-${idx}`}
-            shortcuts={shortcuts}
-            subtitle={block.shortcuts.subtitle}
-            title={block.shortcuts.title}
-            hasTwoColumns={block.shortcuts.hasTwoColumns}
-          />
-        )
-      default:
-        return null
-    }
-  })
+  return Promise.all(
+    blocks.map(async (block, idx) => {
+      switch (block.typename) {
+        case BlocksEnums.block.CardsGrid:
+          return (
+            <CardsGrid
+              key={`${block.cards_grid.title}-${idx}`}
+              cards_grid={block.cards_grid}
+            />
+          )
+        case BlocksEnums.block.Content:
+          return (
+            <section key={`${block.__typename}-${idx}`}>
+              <JsonToHtml
+                nodes={block.content.json.children}
+                embeds={block.content.embedded_itemsConnection.edges}
+              />
+            </section>
+          )
+        case BlocksEnums.block.DynamicContent:
+          const dynamicContent = {
+            ...block.dynamic_content,
+            link: block.dynamic_content.link
+              ? {
+                  ...block.dynamic_content.link,
+                  href: await modWebviewLink(
+                    block.dynamic_content.link.href,
+                    lang
+                  ),
+                }
+              : undefined,
+          }
+
+          return (
+            <DynamicContent
+              dynamic_content={dynamicContent}
+              key={`${block.dynamic_content.title}-${idx}`}
+            />
+          )
+        case BlocksEnums.block.Shortcuts:
+          const shortcuts = await Promise.all(
+            block.shortcuts.shortcuts.map(async (shortcut) => ({
+              ...shortcut,
+              url: await modWebviewLink(shortcut.url, lang),
+            }))
+          )
+          return (
+            <ShortcutsList
+              key={`${block.shortcuts.title}-${idx}`}
+              shortcuts={shortcuts}
+              subtitle={block.shortcuts.subtitle}
+              title={block.shortcuts.title}
+              hasTwoColumns={block.shortcuts.hasTwoColumns}
+            />
+          )
+        default:
+          return null
+      }
+    })
+  )
 }
--- a/apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx
+++ b/apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx
@@ -10,7 +10,8 @@ import Blocks from "./Blocks"
 import styles from "./loyaltyPage.module.css"

 export default async function AboutScandicFriends() {
-  const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
+  const caller = await serverClient()
+  const loyaltyPageRes = await caller.contentstack.loyaltyPage.get()

  if (!loyaltyPageRes) {
    return null