Merge master

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

@@ -19,3 +19,26 @@
     padding-top: var(--Spacing-x9);
   }
 }
+
+.booking {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x5);
+  grid-area: booking;
+  padding-bottom: var(--Spacing-x9);
+}
+
+.aside {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .mobileReceipt {
+    display: none;
+  }
+
+  .aside {
+    display: grid;
+    grid-area: receipt;
+  }
+}

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

@@ -1,14 +1,84 @@
+import { notFound } from "next/navigation"
+
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
-import BookingConfirmation from "@/components/HotelReservation/BookingConfirmation"
+import Alerts from "@/components/HotelReservation/BookingConfirmation/Alerts"
+import Header from "@/components/HotelReservation/BookingConfirmation/Header"
+import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
+import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
+import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
+import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
+import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
+import Tracking from "@/components/HotelReservation/BookingConfirmation/Tracking"
+import { mapRoomState } from "@/components/HotelReservation/BookingConfirmation/utils"
+import SidePanel from "@/components/HotelReservation/SidePanel"
+import Divider from "@/components/TempDesignSystem/Divider"
+import { getIntl } from "@/i18n"
+import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
+
+import styles from "./page.module.css"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function BookingConfirmationPage({
+  params,
   searchParams,
-}: PageArgs<LangParams, { confirmationNumber: string }>) {
-  void getBookingConfirmation(searchParams.confirmationNumber)
+}: PageArgs<LangParams, { RefId?: string }>) {
+  const refId = searchParams.RefId
+
+  if (!refId) {
+    notFound()
+  }
+
+  const bookingConfirmation = await getBookingConfirmation(refId, params.lang)
+
+  if (!bookingConfirmation) {
+    notFound()
+  }
+
+  const { booking, hotelData, room } = bookingConfirmation
+  const { hotel } = hotelData
+
+  const intl = await getIntl()
+
   return (
-    <BookingConfirmation confirmationNumber={searchParams.confirmationNumber} />
+    <BookingConfirmationProvider
+      bookingCode={booking.bookingCode}
+      currencyCode={booking.currencyCode}
+      fromDate={booking.checkInDate}
+      toDate={booking.checkOutDate}
+      rooms={[
+        mapRoomState(booking, room, intl),
+        // null represents "known but not yet fetched rooms" and is used to render placeholders correctly
+        ...Array(booking.linkedReservations.length).fill(null),
+      ]}
+      vat={booking.vatPercentage}
+    >
+      <main className={styles.main}>
+        <Header booking={booking} hotel={hotel} refId={refId} />
+        <div className={styles.booking}>
+          <Alerts booking={booking} />
+          <Rooms
+            booking={booking}
+            checkInTime={hotel.hotelFacts.checkin.checkInTime}
+            checkOutTime={hotel.hotelFacts.checkin.checkOutTime}
+            mainRoom={room}
+          />
+          <PaymentDetails />
+          <Divider color="primaryLightSubtle" />
+          <HotelDetails hotel={hotel} />
+          <Promos refId={refId} hotelId={hotel.operaId} />
+          <div className={styles.mobileReceipt}>
+            <Receipt />
+          </div>
+        </div>
+        <aside className={styles.aside}>
+          <SidePanel variant="receipt">
+            <Receipt />
+          </SidePanel>
+        </aside>
+      </main>
+      <Tracking bookingConfirmation={bookingConfirmation} />
+    </BookingConfirmationProvider>
   )
 }

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

@@ -6,10 +6,12 @@ import {
 } from "@/constants/booking"
 import { myStay } from "@/constants/routes/myStay"
 import { serverClient } from "@/lib/trpc/server"
+import { createCounter } from "@/server/telemetry"
 
 import GuaranteeCallback from "@/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback"
 import TrackGuarantee from "@/components/HotelReservation/MyStay/TrackGuarantee"
 import LoadingSpinner from "@/components/LoadingSpinner"
+import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
@@ -19,45 +21,56 @@ export default async function GuaranteePaymentCallbackPage({
 }: PageArgs<
   LangParams,
   {
-    status: PaymentCallbackStatusEnum
-    RefId: string
+    status?: PaymentCallbackStatusEnum
+    RefId?: string
     confirmationNumber?: string
     ancillary?: string
   }
 >) {
-  console.log(`[gla-payment-callback] callback started`)
   const lang = params.lang
   const status = searchParams.status
-  const confirmationNumber = searchParams.confirmationNumber
   const refId = searchParams.RefId
-  if (!refId) {
-    notFound()
-  }
+  const confirmationNumber = searchParams.confirmationNumber
   const isAncillaryFlow = searchParams.ancillary
 
+  setLang(params.lang)
+
+  if (!status || !confirmationNumber || !refId) {
+    notFound()
+  }
+
+  const glaSuccessCounter = createCounter("gla", "success")
+  const metricsGlaSuccess = glaSuccessCounter.init({
+    confirmationNumber,
+  })
+
+  metricsGlaSuccess.start()
+
   const myStayUrl = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
-  const searchObject = new URLSearchParams()
 
   if (status === PaymentCallbackStatusEnum.Success && confirmationNumber) {
     if (isAncillaryFlow) {
       return (
         <GuaranteeCallback
           returnUrl={myStayUrl}
+          refId={refId}
           confirmationNumber={confirmationNumber}
           lang={lang}
         />
       )
     }
-    console.log(`[gla-payment-callback] redirecting to: ${myStayUrl}`)
+
     return <TrackGuarantee status={status} redirectUrl={myStayUrl} />
   }
 
   let errorMessage = undefined
 
   if (confirmationNumber) {
+    const searchObject = new URLSearchParams()
+
     try {
       const bookingStatus = await serverClient().booking.status({
-        confirmationNumber,
+        refId,
       })
 
       const error = bookingStatus.errors.find((e) => e.errorCode)

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

@@ -0,0 +1,29 @@
+import {
+  BookingErrorCodeEnum,
+  PaymentCallbackStatusEnum,
+} from "@/constants/booking"
+import { details } from "@/constants/routes/hotelReservation"
+
+import HandleErrorCallback from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function PaymentCallbackCancelPage({
+  params,
+}: PageArgs<LangParams>) {
+  console.log(`[payment-callback] cancel callback started`)
+  const lang = params.lang
+
+  const returnUrl = details(lang)
+  const searchObject = new URLSearchParams()
+
+  searchObject.set("errorCode", BookingErrorCodeEnum.TransactionCancelled)
+
+  return (
+    <HandleErrorCallback
+      returnUrl={returnUrl.toString()}
+      searchObject={searchObject}
+      status={PaymentCallbackStatusEnum.Cancel}
+    />
+  )
+}

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

@@ -0,0 +1,71 @@
+import {
+  BookingErrorCodeEnum,
+  PaymentCallbackStatusEnum,
+} from "@/constants/booking"
+import { details } from "@/constants/routes/hotelReservation"
+import { serverClient } from "@/lib/trpc/server"
+
+import HandleErrorCallback from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback"
+import { calculateRefId } from "@/utils/refId"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function PaymentCallbackErrorPage({
+  params,
+  searchParams,
+}: PageArgs<
+  LangParams,
+  {
+    confirmationNumber?: string
+  }
+>) {
+  console.log(`[payment-callback] error callback started`)
+
+  const lang = params.lang
+  const confirmationNumber = searchParams.confirmationNumber
+
+  const returnUrl = details(lang)
+  const searchObject = new URLSearchParams()
+
+  let errorMessage = undefined
+
+  if (confirmationNumber) {
+    const refId = calculateRefId(confirmationNumber, "")
+
+    try {
+      const bookingStatus = await serverClient().booking.confirmationError({
+        refId,
+      })
+
+      // TODO: how to handle errors for multiple rooms?
+      const error = bookingStatus.errors.find((e) => e.errorCode)
+
+      errorMessage =
+        error?.description ??
+        `No error message found for booking ${confirmationNumber}`
+
+      searchObject.set(
+        "errorCode",
+        error
+          ? error.errorCode.toString()
+          : BookingErrorCodeEnum.TransactionFailed
+      )
+    } catch {
+      console.error(
+        `[payment-callback] failed to get booking status for ${confirmationNumber}`
+      )
+
+      searchObject.set("errorCode", BookingErrorCodeEnum.TransactionFailed)
+      errorMessage = `Failed to get booking status for ${confirmationNumber}`
+    }
+  }
+
+  return (
+    <HandleErrorCallback
+      returnUrl={returnUrl.toString()}
+      searchObject={searchObject}
+      status={PaymentCallbackStatusEnum.Error}
+      errorMessage={errorMessage}
+    />
+  )
+}

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

@@ -1,93 +0,0 @@
-import {
-  BOOKING_CONFIRMATION_NUMBER,
-  BookingErrorCodeEnum,
-  PaymentCallbackStatusEnum,
-} from "@/constants/booking"
-import {
-  bookingConfirmation,
-  details,
-} from "@/constants/routes/hotelReservation"
-import { serverClient } from "@/lib/trpc/server"
-
-import HandleErrorCallback from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback"
-import HandleSuccessCallback from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function PaymentCallbackPage({
-  params,
-  searchParams,
-}: PageArgs<
-  LangParams,
-  {
-    status: PaymentCallbackStatusEnum
-    confirmationNumber?: string
-    hotel?: string
-  }
->) {
-  console.log(`[payment-callback] callback started`)
-  const lang = params.lang
-  const status = searchParams.status
-  const confirmationNumber = searchParams.confirmationNumber
-
-  if (status === PaymentCallbackStatusEnum.Success && confirmationNumber) {
-    const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${confirmationNumber}`
-    console.log(
-      `[payment-callback] rendering success callback with confirmation number: ${confirmationNumber}`
-    )
-
-    return (
-      <HandleSuccessCallback
-        confirmationNumber={confirmationNumber}
-        successRedirectUrl={confirmationUrl}
-      />
-    )
-  }
-
-  const returnUrl = details(lang)
-  const searchObject = new URLSearchParams()
-
-  let errorMessage = undefined
-
-  if (confirmationNumber) {
-    try {
-      const bookingStatus = await serverClient().booking.status({
-        confirmationNumber,
-      })
-
-      // TODO: how to handle errors for multiple rooms?
-      const error = bookingStatus.errors.find((e) => e.errorCode)
-
-      errorMessage =
-        error?.description ??
-        `No error message found for booking ${confirmationNumber}, status: ${status}`
-
-      searchObject.set(
-        "errorCode",
-        error
-          ? error.errorCode.toString()
-          : BookingErrorCodeEnum.TransactionFailed
-      )
-    } catch {
-      console.error(
-        `[payment-callback] failed to get booking status for ${confirmationNumber}, status: ${status}`
-      )
-      if (status === PaymentCallbackStatusEnum.Cancel) {
-        searchObject.set("errorCode", BookingErrorCodeEnum.TransactionCancelled)
-      }
-      if (status === PaymentCallbackStatusEnum.Error) {
-        searchObject.set("errorCode", BookingErrorCodeEnum.TransactionFailed)
-        errorMessage = `Failed to get booking status for ${confirmationNumber}, status: ${status}`
-      }
-    }
-  }
-
-  return (
-    <HandleErrorCallback
-      returnUrl={returnUrl.toString()}
-      searchObject={searchObject}
-      status={status}
-      errorMessage={errorMessage}
-    />
-  )
-}

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

@@ -0,0 +1,44 @@
+import { notFound } from "next/navigation"
+
+import { bookingConfirmation } from "@/constants/routes/hotelReservation"
+import { createCounter } from "@/server/telemetry"
+
+import HandleSuccessCallback from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback"
+import { setLang } from "@/i18n/serverContext"
+import { calculateRefId } from "@/utils/refId"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function PaymentCallbackSuccessPage({
+  params,
+  searchParams,
+}: PageArgs<
+  LangParams,
+  {
+    confirmationNumber?: string
+  }
+>) {
+  const confirmationNumber = searchParams.confirmationNumber
+
+  setLang(params.lang)
+
+  if (!confirmationNumber) {
+    notFound()
+  }
+
+  const paymentSuccessCounter = createCounter("payment", "success")
+  const metricsPaymentSuccess = paymentSuccessCounter.init({
+    confirmationNumber,
+  })
+
+  metricsPaymentSuccess.start()
+
+  const refId = calculateRefId(confirmationNumber, "")
+
+  return (
+    <HandleSuccessCallback
+      refId={refId}
+      successRedirectUrl={bookingConfirmation(params.lang)}
+    />
+  )
+}

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

@@ -1,6 +1,7 @@
 import { notFound, redirect } from "next/navigation"
 import { Suspense } from "react"
 
+import { BookingErrorCodeEnum } from "@/constants/booking"
 import { selectRate } from "@/constants/routes/hotelReservation"
 import {
   getBreakfastPackages,
@@ -16,8 +17,6 @@ import RoomOne from "@/components/HotelReservation/EnterDetails/Room/One"
 import DesktopSummary from "@/components/HotelReservation/EnterDetails/Summary/Desktop"
 import MobileSummary from "@/components/HotelReservation/EnterDetails/Summary/Mobile"
 import EnterDetailsTrackingWrapper from "@/components/HotelReservation/EnterDetails/Tracking"
-import Alert from "@/components/TempDesignSystem/Alert"
-import { getIntl } from "@/i18n"
 import RoomProvider from "@/providers/Details/RoomProvider"
 import EnterDetailsProvider from "@/providers/EnterDetailsProvider"
 import { convertSearchParamsToObj } from "@/utils/url"
@@ -25,7 +24,6 @@ import { convertSearchParamsToObj } from "@/utils/url"
 import styles from "./page.module.css"
 
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
-import { AlertTypeEnum } from "@/types/enums/alert"
 import type { LangParams, PageArgs } from "@/types/params"
 import type { Room } from "@/types/providers/details/room"
 
@@ -71,6 +69,7 @@ export default async function DetailsPage({
       // (possibly also add an error case to url?)
       // -------------------------------------------------------
       // redirect back to select-rate if availability call fails
+      selectRoomParams.set("errorCode", BookingErrorCodeEnum.AvailabilityError)
       redirect(`${selectRate(lang)}?${selectRoomParams.toString()}`)
     }
 
@@ -94,12 +93,9 @@ export default async function DetailsPage({
     hotel.merchantInformationData.alternatePaymentOptions = []
   }
 
-  const intl = await getIntl()
-
   const firstRoom = rooms[0]
   const multirooms = rooms.slice(1)
 
-  const isRoomNotAvailable = rooms.some((room) => !room.isAvailable)
   return (
     <EnterDetailsProvider
       booking={booking}
@@ -112,26 +108,6 @@ export default async function DetailsPage({
       <main>
         <HotelHeader hotelData={hotelData} />
         <div className={styles.container}>
-          {isRoomNotAvailable && (
-            <Alert
-              type={AlertTypeEnum.Alarm}
-              variant="inline"
-              heading={intl.formatMessage({
-                defaultMessage: "Room sold out",
-              })}
-              text={intl.formatMessage({
-                defaultMessage:
-                  "Unfortunately, one of the rooms you selected is sold out. Please choose another room to proceed.",
-              })}
-              link={{
-                title: intl.formatMessage({
-                  defaultMessage: "Change room",
-                }),
-                url: `${selectRate(lang)}?${selectRoomParams.toString()}`,
-                keepSearchParams: true,
-              }}
-            />
-          )}
           <div className={styles.content}>
             <RoomProvider idx={0} room={firstRoom}>
               <RoomOne user={user} />

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

@@ -14,7 +14,6 @@ import {
   getProfileSafely,
   getSavedPaymentCardsSafely,
 } from "@/lib/trpc/memoizedRequests"
-import { decrypt } from "@/server/routers/utils/encryption"
 
 import { auth } from "@/auth"
 import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
@@ -34,6 +33,7 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 import MyStayProvider from "@/providers/MyStay"
+import { parseRefId } from "@/utils/refId"
 import { isValidSession } from "@/utils/session"
 import { getCurrentWebUrl } from "@/utils/url"
 
@@ -47,25 +47,20 @@ export default async function MyStay({
   searchParams,
 }: PageArgs<LangParams, { RefId?: string }>) {
   setLang(params.lang)
+
   const refId = searchParams.RefId
 
   if (!refId) {
     notFound()
   }
 
-  const value = decrypt(refId)
-  if (!value) {
-    return notFound()
-  }
-
   const session = await auth()
   const isLoggedIn = isValidSession(session)
-
-  const [confirmationNumber, lastName] = value.split(",")
+  const { confirmationNumber, lastName } = parseRefId(refId)
   const bv = cookies().get("bv")?.value
   let bookingConfirmation
   if (isLoggedIn) {
-    bookingConfirmation = await getBookingConfirmation(confirmationNumber)
+    bookingConfirmation = await getBookingConfirmation(refId, params.lang)
   } else if (bv) {
     const params = new URLSearchParams(bv)
     const firstName = params.get("firstName")
@@ -79,27 +74,18 @@ export default async function MyStay({
         email
       )
     } else {
-      return (
-        <RenderAdditionalInfoForm
-          confirmationNumber={confirmationNumber}
-          lastName={lastName}
-        />
-      )
+      return <RenderAdditionalInfoForm refId={refId} lastName={lastName} />
     }
   } else {
-    return (
-      <RenderAdditionalInfoForm
-        confirmationNumber={confirmationNumber}
-        lastName={lastName}
-      />
-    )
+    return <RenderAdditionalInfoForm refId={refId} lastName={lastName} />
   }
 
   if (!bookingConfirmation) {
     return notFound()
   }
 
-  const { additionalData, booking, hotel, roomCategories } = bookingConfirmation
+  const { booking, hotelData } = bookingConfirmation
+  const { hotel } = hotelData
 
   const user = await getProfileSafely()
 
@@ -112,9 +98,7 @@ export default async function MyStay({
     const fromDate = dt(booking.checkInDate).format("YYYY-MM-DD")
     const toDate = dt(booking.checkOutDate).format("YYYY-MM-DD")
 
-    const linkedReservationsPromise = getLinkedReservations({
-      rooms: booking.linkedReservations,
-    })
+    const linkedReservationsPromise = getLinkedReservations(refId, params.lang)
 
     const packagesInput = {
       adults: booking.adults,
@@ -159,7 +143,7 @@ export default async function MyStay({
 
     const imageSrc =
       hotel.hotelContent.images.imageSizes.large ??
-      additionalData.gallery?.heroImages[0]?.imageSizes.large ??
+      hotelData.additionalData.gallery?.heroImages[0]?.imageSizes.large ??
       hotel.galleryImages[0]?.imageSizes.large
 
     const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
@@ -176,7 +160,7 @@ export default async function MyStay({
         lang={params.lang}
         linkedReservationsPromise={linkedReservationsPromise}
         refId={refId}
-        roomCategories={roomCategories}
+        roomCategories={hotelData.roomCategories}
         savedCreditCards={savedCreditCards}
       >
         <main className={styles.main}>
@@ -235,10 +219,7 @@ export default async function MyStay({
     return (
       <main className={styles.main}>
         <div className={styles.form}>
-          <AdditionalInfoForm
-            confirmationNumber={confirmationNumber}
-            lastName={lastName}
-          />
+          <AdditionalInfoForm refId={refId} lastName={lastName} />
         </div>
       </main>
     )
@@ -272,19 +253,16 @@ export default async function MyStay({
 }
 
 function RenderAdditionalInfoForm({
-  confirmationNumber,
+  refId,
   lastName,
 }: {
-  confirmationNumber: string
+  refId: string
   lastName: string
 }) {
   return (
     <main className={styles.main}>
       <div className={styles.form}>
-        <AdditionalInfoForm
-          confirmationNumber={confirmationNumber}
-          lastName={lastName}
-        />
+        <AdditionalInfoForm refId={refId} lastName={lastName} />
       </div>
     </main>
   )

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

@@ -0,0 +1 @@
+export { MyStaySkeleton } from "@/components/HotelReservation/MyStay/myStaySkeleton"

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

@@ -1,20 +1,215 @@
+import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
-import { Suspense } from "react"
 
-import { MyStaySkeleton } from "@/components/HotelReservation/MyStay/myStaySkeleton"
-import { Receipt } from "@/components/HotelReservation/MyStay/Receipt"
+import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { dt } from "@/lib/dt"
+import {
+  findBooking,
+  getAncillaryPackages,
+  getBookingConfirmation,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+import { auth } from "@/auth"
+import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
+import accessBooking, {
+  ACCESS_GRANTED,
+  ERROR_BAD_REQUEST,
+  ERROR_UNAUTHORIZED,
+} from "@/components/HotelReservation/MyStay/accessBooking"
+import Footer from "@/components/HotelReservation/MyStay/Receipt/Footer"
+import Specification from "@/components/HotelReservation/MyStay/Receipt/Specification"
+import Total from "@/components/HotelReservation/MyStay/Receipt/Total"
+import { getIntl } from "@/i18n"
+import { parseRefId } from "@/utils/refId"
+import { isValidSession } from "@/utils/session"
+
+import styles from "./page.module.css"
+
+import { CurrencyEnum } from "@/types/enums/currency"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function ReceiptPage({
+  params,
   searchParams,
 }: PageArgs<LangParams, { RefId?: string }>) {
-  if (!searchParams.RefId) {
+  const refId = searchParams.RefId
+
+  if (!refId) {
     notFound()
   }
+
+  const session = await auth()
+  const isLoggedIn = isValidSession(session)
+  const { confirmationNumber, lastName } = parseRefId(refId)
+
+  const bv = cookies().get("bv")?.value
+  let bookingConfirmation
+  if (isLoggedIn) {
+    bookingConfirmation = await getBookingConfirmation(refId, params.lang)
+  } else if (bv) {
+    const params = new URLSearchParams(bv)
+    const firstName = params.get("firstName")
+    const email = params.get("email")
+
+    if (firstName && email) {
+      bookingConfirmation = await findBooking(
+        confirmationNumber,
+        lastName,
+        firstName,
+        email
+      )
+    } else {
+      return <RenderAdditionalInfoForm refId={refId} lastName={lastName} />
+    }
+  } else {
+    return <RenderAdditionalInfoForm refId={refId} lastName={lastName} />
+  }
+
+  if (!bookingConfirmation) {
+    return notFound()
+  }
+
+  const { booking, hotelData, room } = bookingConfirmation
+  const { hotel } = hotelData
+
+  const intl = await getIntl()
+  const user = await getProfileSafely()
+
+  const access = accessBooking(booking.guest, lastName, user, bv)
+
+  if (access === ACCESS_GRANTED) {
+    const ancillaryPackages = await getAncillaryPackages({
+      fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
+      hotelId: hotel.operaId,
+      toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
+    })
+
+    const currency =
+      booking.currencyCode !== CurrencyEnum.POINTS
+        ? booking.currencyCode
+        : (booking.ancillaries.find((a) => a.currency !== CurrencyEnum.POINTS)
+            ?.currency ??
+          booking.packages.find((p) => p.currency !== CurrencyEnum.POINTS)
+            ?.currency)
+
+    return (
+      <main className={styles.main}>
+        <div>
+          <ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
+          <div className={styles.addresses}>
+            <div>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div>{hotel.name}</div>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
+                </div>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
+                  {hotel.contactInformation.email}
+                </div>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div className={styles.tertiary}>
+                  {hotel.contactInformation.phoneNumber}
+                </div>
+              </Typography>
+            </div>
+            <div className={styles.rightColumn}>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                <div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
+              </Typography>
+              {booking.guest.membershipNumber && (
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  <div>{`${intl.formatMessage({
+                    defaultMessage: "Member",
+                  })} ${booking.guest.membershipNumber}`}</div>
+                </Typography>
+              )}
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
+                  {booking.guest.email}
+                </div>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div className={styles.tertiary}>
+                  {booking.guest.phoneNumber}
+                </div>
+              </Typography>
+            </div>
+          </div>
+        </div>
+        <Total booking={booking} currency={currency} />
+        <Specification
+          ancillaryPackages={ancillaryPackages}
+          booking={booking}
+          currency={currency}
+        />
+
+        <hr className={styles.divider} />
+
+        <Footer booking={booking} room={room} />
+      </main>
+    )
+  }
+
+  if (access === ERROR_BAD_REQUEST) {
+    return (
+      <main className={styles.main}>
+        <div className={styles.form}>
+          <AdditionalInfoForm refId={refId} lastName={lastName} />
+        </div>
+      </main>
+    )
+  }
+
+  if (access === ERROR_UNAUTHORIZED) {
+    return (
+      <main className={styles.main}>
+        <div className={styles.logIn}>
+          <Typography variant="Title/md">
+            <h1>
+              {intl.formatMessage({
+                defaultMessage: "You need to be logged in to view your booking",
+              })}
+            </h1>
+          </Typography>
+          <Typography variant="Body/Lead text">
+            <p>
+              {intl.formatMessage({
+                defaultMessage:
+                  "And you need to be logged in with the same member account that made the booking.",
+              })}
+            </p>
+          </Typography>
+        </div>
+      </main>
+    )
+  }
+
+  return notFound()
+}
+
+function RenderAdditionalInfoForm({
+  refId,
+  lastName,
+}: {
+  refId: string
+  lastName: string
+}) {
   return (
-    <Suspense fallback={<MyStaySkeleton />}>
-      <Receipt refId={searchParams.RefId} />
-    </Suspense>
+    <main className={styles.main}>
+      <div className={styles.form}>
+        <AdditionalInfoForm refId={refId} lastName={lastName} />
+      </div>
+    </main>
   )
 }

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

@@ -14,7 +14,6 @@ import {
   getProfileSafely,
   getSavedPaymentCardsSafely,
 } from "@/lib/trpc/memoizedRequests"
-import { decrypt } from "@/server/routers/utils/encryption"
 
 import { auth } from "@/auth"
 import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
@@ -34,6 +33,7 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 import MyStayProvider from "@/providers/MyStay"
+import { parseRefId } from "@/utils/refId"
 import { isValidSession } from "@/utils/session"
 import { getCurrentWebUrl } from "@/utils/url"
 
@@ -47,24 +47,21 @@ export default async function MyStay({
   searchParams,
 }: PageArgs<LangParams, { RefId?: string }>) {
   setLang(params.lang)
+
   const refId = searchParams.RefId
 
   if (!refId) {
     notFound()
   }
 
-  const value = decrypt(refId)
-  if (!value) {
-    return notFound()
-  }
   const session = await auth()
   const isLoggedIn = isValidSession(session)
+  const { confirmationNumber, lastName } = parseRefId(refId)
 
-  const [confirmationNumber, lastName] = value.split(",")
   const bv = cookies().get("bv")?.value
   let bookingConfirmation
   if (isLoggedIn) {
-    bookingConfirmation = await getBookingConfirmation(confirmationNumber)
+    bookingConfirmation = await getBookingConfirmation(refId, params.lang)
   } else if (bv) {
     const params = new URLSearchParams(bv)
     const firstName = params.get("firstName")
@@ -78,26 +75,17 @@ export default async function MyStay({
         email
       )
     } else {
-      return (
-        <RenderAdditionalInfoForm
-          confirmationNumber={confirmationNumber}
-          lastName={lastName}
-        />
-      )
+      return <RenderAdditionalInfoForm refId={refId} lastName={lastName} />
     }
   } else {
-    return (
-      <RenderAdditionalInfoForm
-        confirmationNumber={confirmationNumber}
-        lastName={lastName}
-      />
-    )
+    return <RenderAdditionalInfoForm refId={refId} lastName={lastName} />
   }
   if (!bookingConfirmation) {
     return notFound()
   }
 
-  const { additionalData, booking, hotel, roomCategories } = bookingConfirmation
+  const { booking, hotelData } = bookingConfirmation
+  const { hotel } = hotelData
 
   const user = await getProfileSafely()
   const intl = await getIntl()
@@ -109,9 +97,7 @@ export default async function MyStay({
     const fromDate = dt(booking.checkInDate).format("YYYY-MM-DD")
     const toDate = dt(booking.checkOutDate).format("YYYY-MM-DD")
 
-    const linkedReservationsPromise = getLinkedReservations({
-      rooms: booking.linkedReservations,
-    })
+    const linkedReservationsPromise = getLinkedReservations(refId, params.lang)
 
     const packagesInput = {
       adults: booking.adults,
@@ -133,9 +119,9 @@ export default async function MyStay({
       (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
     )
     const breakfastIncluded = booking.rateDefinition.breakfastIncluded
-    const alreadyHasABreakfastSelection =
+    const shouldFetchBreakfastPackages =
       !hasBreakfastPackage && !breakfastIncluded
-    if (alreadyHasABreakfastSelection) {
+    if (shouldFetchBreakfastPackages) {
       void getPackages(packagesInput)
     }
     void getSavedPaymentCardsSafely(savedPaymentCardsInput)
@@ -147,7 +133,7 @@ export default async function MyStay({
     })
 
     let breakfastPackages = null
-    if (alreadyHasABreakfastSelection) {
+    if (shouldFetchBreakfastPackages) {
       breakfastPackages = await getPackages(packagesInput)
     }
     const savedCreditCards = await getSavedPaymentCardsSafely(
@@ -156,7 +142,7 @@ export default async function MyStay({
 
     const imageSrc =
       hotel.hotelContent.images.imageSizes.large ??
-      additionalData.gallery?.heroImages[0]?.imageSizes.large ??
+      hotelData.additionalData.gallery?.heroImages[0]?.imageSizes.large ??
       hotel.galleryImages[0]?.imageSizes.large
 
     const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
@@ -173,7 +159,7 @@ export default async function MyStay({
         lang={params.lang}
         linkedReservationsPromise={linkedReservationsPromise}
         refId={refId}
-        roomCategories={roomCategories}
+        roomCategories={hotelData.roomCategories}
         savedCreditCards={savedCreditCards}
       >
         <main className={styles.main}>
@@ -232,10 +218,7 @@ export default async function MyStay({
     return (
       <main className={styles.main}>
         <div className={styles.form}>
-          <AdditionalInfoForm
-            confirmationNumber={confirmationNumber}
-            lastName={lastName}
-          />
+          <AdditionalInfoForm refId={refId} lastName={lastName} />
         </div>
       </main>
     )
@@ -269,19 +252,16 @@ export default async function MyStay({
 }
 
 function RenderAdditionalInfoForm({
-  confirmationNumber,
+  refId,
   lastName,
 }: {
-  confirmationNumber: string
+  refId: string
   lastName: string
 }) {
   return (
     <main className={styles.main}>
       <div className={styles.form}>
-        <AdditionalInfoForm
-          confirmationNumber={confirmationNumber}
-          lastName={lastName}
-        />
+        <AdditionalInfoForm refId={refId} lastName={lastName} />
       </div>
     </main>
   )

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useCallback, useEffect, useRef } from "react"
-import { Button as AriaButton } from "react-aria-components"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
@@ -94,12 +94,12 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
           <Typography variant="Body/Supporting text (caption)/smRegular">
             <div className={styles.captions}>
               <Typography variant="Link/sm">
-                <AriaButton
+                <ButtonRAC
                   className={styles.addressButton}
                   onPress={() => setActiveMarker(hotel.id)}
                 >
                   {address}
-                </AriaButton>
+                </ButtonRAC>
               </Typography>
               <Divider variant="vertical" color="beige" />
               <p>

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx

@@ -2,7 +2,7 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -48,9 +48,9 @@ export default function HotelMapCard({
   return (
     <article className={className}>
       <div className={styles.wrapper}>
-        <Button
-          size="Medium"
-          variant="Icon"
+        <IconButton
+          theme="Black"
+          style="Muted"
           className={styles.closeButton}
           onPress={handleClose}
           aria-label={intl.formatMessage({
@@ -63,7 +63,7 @@ export default function HotelMapCard({
             className={styles.closeIcon}
             color="CurrentColor"
           />
-        </Button>
+        </IconButton>
         {image ? (
           <DialogImage
             image={image.src}

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

@@ -3,7 +3,7 @@
 import { useMap } from "@vis.gl/react-google-maps"
 import { cx } from "class-variance-authority"
 import { useState } from "react"
-import { Button as AriaButton } from "react-aria-components"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -136,12 +136,12 @@ export default function Sidebar({
         }`}
       >
         <Typography variant="Body/Paragraph/mdBold">
-          <AriaButton
+          <ButtonRAC
             className={styles.sidebarToggle}
             onPress={toggleFullScreenSidebar}
           >
             {isFullScreenSidebar ? viewAsMapMsg : viewAsListMsg}
-          </AriaButton>
+          </ButtonRAC>
         </Typography>
         <div className={styles.sidebarContent}>
           <Typography variant="Title/sm">
@@ -168,7 +168,7 @@ export default function Sidebar({
                   {pois.map((poi) => (
                     <li key={poi.name} className={styles.poiItem}>
                       <Typography variant="Body/Paragraph/mdRegular">
-                        <AriaButton
+                        <ButtonRAC
                           className={cx(styles.poiButton, {
                             [styles.active]: activePoi === poi.name,
                           })}
@@ -188,7 +188,7 @@ export default function Sidebar({
                               }
                             )}
                           </span>
-                        </AriaButton>
+                        </ButtonRAC>
                       </Typography>
                     </li>
                   ))}

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

@@ -1,11 +1,13 @@
 "use client"
 
 import { useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox/"
-import Button from "@/components/TempDesignSystem/Button"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./previewImages.module.css"
@@ -17,31 +19,52 @@ export default function PreviewImages({
   hotelName,
 }: PreviewImagesProps) {
   const intl = useIntl()
-  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+  const [lightboxState, setLightboxState] = useState({
+    activeIndex: 0,
+    isOpen: false,
+  })
 
   const lightboxImages = mapApiImagesToGalleryImages(images)
 
   return (
     <div className={styles.imageWrapper}>
-      {images.slice(0, 3).map((image, index) => (
-        <Image
-          key={index}
-          src={image.imageSizes.medium}
-          alt={image.metaData.altText}
-          title={image.metaData.title}
-          width={index === 0 ? 752 : 292}
-          height={index === 0 ? 540 : 266}
-          onClick={() => setLightboxIsOpen(true)}
-          className={styles.image}
-        />
+      {lightboxImages.slice(0, 3).map((image, index) => (
+        <ButtonRAC
+          key={image.src}
+          className={styles.imageButton}
+          aria-label={intl.formatMessage({
+            defaultMessage: "See all photos",
+          })}
+          onPress={() =>
+            setLightboxState({
+              activeIndex: index,
+              isOpen: true,
+            })
+          }
+        >
+          <Image
+            src={image.src}
+            alt={image.alt}
+            title={image.caption || ""}
+            width={index === 0 ? 752 : 292}
+            height={index === 0 ? 540 : 266}
+            className={styles.image}
+          />
+        </ButtonRAC>
       ))}
       {images.length > 1 && (
         <>
           <Button
-            theme="base"
-            intent="inverted"
-            size="small"
-            onClick={() => setLightboxIsOpen(true)}
+            variant="Primary"
+            color="Inverted"
+            size="Small"
+            onPress={() =>
+              setLightboxState({
+                activeIndex: 0,
+                isOpen: true,
+              })
+            }
+            typography="Body/Supporting text (caption)/smBold"
             className={styles.seeAllButton}
           >
             {intl.formatMessage({
@@ -56,8 +79,9 @@ export default function PreviewImages({
               },
               { title: hotelName }
             )}
-            isOpen={lightboxIsOpen}
-            onClose={() => setLightboxIsOpen(false)}
+            isOpen={lightboxState.isOpen}
+            activeIndex={lightboxState.activeIndex}
+            onClose={() => setLightboxState({ activeIndex: 0, isOpen: false })}
           />
         </>
       )}

apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css

@@ -3,18 +3,25 @@
   gap: 8px;
   position: relative;
   width: 100%;
-  padding: 0 var(--Spacing-x2);
   z-index: 0;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+}
+
+.imageButton {
+  padding: 0;
+  border-width: 0;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
 }
 
 .image {
   object-fit: cover;
-  border-radius: var(--Corner-radius-Small);
   width: 100%;
   height: 100%;
   max-height: 30vh;
-  cursor: pointer;
-  max-width: var(--max-width-page);
   margin: 0 auto;
 }
 

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

@@ -104,25 +104,32 @@ export default async function RoomSidePeek({
           </Typography>
           <ul className={styles.facilityList}>
             {room.roomFacilities
+              .filter((facility) => !!facility.isUniqueSellingPoint)
               .sort((a, b) => a.sortOrder - b.sortOrder)
               .map((facility) => {
-                const Icon = (
-                  <FacilityIcon
-                    name={facility.icon}
-                    size={24}
-                    color="Icon/Default"
-                  />
-                )
+                const facilityName = facility.availableInAllRooms
+                  ? facility.name
+                  : intl.formatMessage(
+                      {
+                        defaultMessage: "{facility} (available in some rooms)",
+                      },
+                      {
+                        facility: facility.name,
+                      }
+                    )
+
                 return (
                   <li className={styles.listItem} key={facility.name}>
-                    {Icon && Icon}
+                    <FacilityIcon
+                      name={facility.icon}
+                      size={24}
+                      color="Icon/Default"
+                    />
                     <Typography
                       variant="Body/Paragraph/mdRegular"
-                      className={cx(styles.iconText, {
-                        [styles.noIcon]: !Icon,
-                      })}
+                      className={styles.iconText}
                     >
-                      <span>{facility.name}</span>
+                      <span>{facilityName}</span>
                     </Typography>
                   </li>
                 )

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css

@@ -45,10 +45,6 @@
   justify-content: flex-start;
 }
 
-.noIcon {
-  margin-left: var(--Spacing-x4);
-}
-
 .buttonContainer {
   background-color: var(--Base-Background-Primary-Normal);
   border-top: 1px solid var(--Base-Border-Subtle);

apps/scandic-web/components/HotelReservation/AddToCalendar/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { createEvent } from "ics"
 import { useIntl } from "react-intl"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx

@@ -1,24 +0,0 @@
-"use client"
-import { useRef } from "react"
-
-import Header from "@/components/HotelReservation/BookingConfirmation/Header"
-
-import styles from "./confirmation.module.css"
-
-import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function Confirmation({
-  booking,
-  hotel,
-  children,
-  refId,
-}: React.PropsWithChildren<ConfirmationProps>) {
-  const mainRef = useRef<HTMLElement | null>(null)
-
-  return (
-    <main className={styles.main} ref={mainRef}>
-      <Header booking={booking} hotel={hotel} mainRef={mainRef} refId={refId} />
-      {children}
-    </main>
-  )
-}

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -1,15 +1,22 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
+import { myStay } from "@/constants/routes/myStay"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 
 import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"
 
-export default function ManageBooking({ bookingUrl }: ManageBookingProps) {
+export default function ManageBooking({ refId }: ManageBookingProps) {
   const intl = useIntl()
+  const lang = useLang()
+
+  const bookingUrl = `${myStay[lang]}?RefId=${refId}`
 
   return (
     <Button

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

@@ -1,15 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { myStay } from "@/constants/routes/myStay"
-
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import useLang from "@/hooks/useLang"
 
 import AddToCalendar from "../../AddToCalendar"
 import AddToCalendarButton from "./Actions/AddToCalendarButton"
-// import DownloadInvoice from "./Actions/DownloadInvoice"
 import { generateDateTime } from "./Actions/helpers"
 import ManageBooking from "./Actions/ManageBooking"
 
@@ -22,11 +18,9 @@ import type { BookingConfirmationHeaderProps } from "@/types/components/hotelRes
 export default function Header({
   booking,
   hotel,
-  // mainRef,
   refId,
 }: BookingConfirmationHeaderProps) {
   const intl = useIntl()
-  const lang = useLang()
 
   const text = intl.formatMessage({
     defaultMessage:
@@ -52,8 +46,6 @@ export default function Header({
     url: hotel.contactInformation.websiteUrl,
   }
 
-  const bookingUrlPath = `${myStay[lang]}?RefId=${refId}`
-
   return (
     <header className={styles.header}>
       <hgroup className={styles.hgroup}>
@@ -74,9 +66,7 @@ export default function Header({
           hotelName={hotel.name}
           renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
         />
-        <ManageBooking bookingUrl={bookingUrlPath} />
-        {/* Download Invoice will be added later (currently available on My Stay) */}
-        {/* <DownloadInvoice mainRef={mainRef} /> */}
+        <ManageBooking refId={refId} />
       </div>
     </header>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/index.tsx

@@ -1,9 +1,8 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
-import { homeHrefs } from "@/constants/homeHrefs"
-import { myBooking } from "@/constants/myBooking"
-import { env } from "@/env/client"
+import { myStay } from "@/constants/routes/myStay"
 
 import useLang from "@/hooks/useLang"
 
@@ -13,22 +12,17 @@ import styles from "./promos.module.css"
 
 import type { PromosProps } from "@/types/components/hotelReservation/bookingConfirmation/promos"
 
-export default function Promos({
-  confirmationNumber,
-  hotelId,
-  lastName,
-}: PromosProps) {
+export default function Promos({ refId, hotelId }: PromosProps) {
   const intl = useIntl()
   const lang = useLang()
-  const homeUrl = homeHrefs[env.NEXT_PUBLIC_NODE_ENV][lang]
-  const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang]
+
   return (
     <div className={styles.promos}>
       <Promo
         buttonText={intl.formatMessage({
           defaultMessage: "View and buy add-ons",
         })}
-        href={`${myBookingUrl}?bookingId=${confirmationNumber}&lastName=${lastName}`}
+        href={`${myStay[lang]}?RefId=${refId}`}
         text={intl.formatMessage({
           defaultMessage:
             "Discover the little extra touches to make your upcoming stay even more unforgettable.",
@@ -41,7 +35,7 @@ export default function Promos({
         buttonText={intl.formatMessage({
           defaultMessage: "Book another stay",
         })}
-        href={`${homeUrl}?hotel=${hotelId}`}
+        href={`/${lang}?hotel=${hotelId}`}
         text={intl.formatMessage({
           defaultMessage:
             "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx

@@ -20,14 +20,16 @@ import { CurrencyEnum } from "@/types/enums/currency"
 export function LinkedReservation({
   checkInTime,
   checkOutTime,
-  confirmationNumber,
+  refId,
   roomIndex,
 }: LinkedReservationProps) {
   const lang = useLang()
-  const { data, refetch, isLoading } = trpc.booking.get.useQuery({
-    confirmationNumber,
+
+  const { data, refetch, isLoading } = trpc.booking.confirmation.useQuery({
+    refId,
     lang,
   })
+
   const {
     setRoom,
     setFormattedTotalCost,
@@ -41,6 +43,7 @@ export function LinkedReservation({
     totalBookingPrice: state.totalBookingPrice,
     totalBookingCheques: state.totalBookingCheques,
   }))
+
   const intl = useIntl()
 
   useEffect(() => {
@@ -79,13 +82,20 @@ export function LinkedReservation({
     return <Retry handleRefetch={refetch} />
   }
 
+  const { booking, room } = data
+
   return (
     <Room
-      booking={data.booking}
+      checkInDate={booking.checkInDate}
+      checkOutDate={booking.checkOutDate}
       checkInTime={checkInTime}
       checkOutTime={checkOutTime}
-      img={data.room.images[0]}
-      roomName={data.room.name}
+      confirmationNumber={booking.confirmationNumber}
+      guaranteeInfo={booking.guaranteeInfo}
+      guest={booking.guest}
+      img={room.images[0]}
+      rateDefinition={booking.rateDefinition}
+      roomName={room.name}
     />
   )
 }

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -20,24 +20,28 @@ import styles from "./room.module.css"
 import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"
 
 export default function Room({
-  booking,
+  checkInDate,
+  checkOutDate,
   checkInTime,
   checkOutTime,
+  confirmationNumber,
+  guaranteeInfo,
+  guest,
   img,
+  rateDefinition,
   roomName,
 }: RoomProps) {
   const intl = useIntl()
   const lang = useLang()
 
-  const guestName = `${booking.guest.firstName} ${booking.guest.lastName}`
-  const fromDate = dt(booking.checkInDate).locale(lang)
-  const toDate = dt(booking.checkOutDate).locale(lang)
-
+  const guestName = `${guest.firstName} ${guest.lastName}`
+  const fromDate = dt(checkInDate).locale(lang)
+  const toDate = dt(checkOutDate).locale(lang)
   const isFlexBooking =
-    booking.rateDefinition.cancellationRule ===
+    rateDefinition.cancellationRule ===
     CancellationRuleEnum.CancellableBefore6PM
   const isChangeBooking =
-    booking.rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
+    rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
   return (
     <article className={styles.room}>
       <header className={styles.header}>
@@ -47,11 +51,11 @@ export default function Room({
               {
                 defaultMessage: "Booking number {value}",
               },
-              { value: booking.confirmationNumber }
+              { value: confirmationNumber }
             )}
           </h2>
         </Typography>
-        {booking.rateDefinition.isMemberRate ? (
+        {rateDefinition.isMemberRate ? (
           <div className={styles.benefits}>
             <>
               <MaterialIcon
@@ -67,7 +71,7 @@ export default function Room({
             </>
           </div>
         ) : null}
-        {booking.guaranteeInfo && (
+        {guaranteeInfo && (
           <div className={styles.benefits}>
             <MaterialIcon
               icon="check_circle"
@@ -168,7 +172,7 @@ export default function Room({
                 })}
               </Body>
               <Body color="uiTextHighContrast">
-                {booking.rateDefinition.cancellationText}
+                {rateDefinition.cancellationText}
               </Body>
             </li>
             {isFlexBooking || isChangeBooking ? (
@@ -196,25 +200,23 @@ export default function Room({
               })}
             </Body>
             <Body color="uiTextHighContrast">{guestName}</Body>
-            {booking.guest.membershipNumber ? (
+            {guest.membershipNumber ? (
               <Body color="uiTextHighContrast">
                 {intl.formatMessage(
                   {
                     defaultMessage: "Friend no. {value}",
                   },
                   {
-                    value: booking.guest.membershipNumber,
+                    value: guest.membershipNumber,
                   }
                 )}
               </Body>
             ) : null}
-            {booking.guest.phoneNumber ? (
-              <Body color="uiTextHighContrast">
-                {booking.guest.phoneNumber}
-              </Body>
+            {guest.phoneNumber ? (
+              <Body color="uiTextHighContrast">{guest.phoneNumber}</Body>
             ) : null}
-            {booking.guest.email ? (
-              <Body color="uiTextHighContrast">{booking.guest.email}</Body>
+            {guest.email ? (
+              <Body color="uiTextHighContrast">{guest.email}</Body>
             ) : null}
           </div>
         </div>

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx

@@ -9,55 +9,56 @@ import styles from "./rooms.module.css"
 
 import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
 
+async function RoomTitle({ nr }: { nr: number }) {
+  const intl = await getIntl()
+
+  return (
+    <Typography variant="Title/Subtitle/md">
+      <h2 className={styles.roomTitle}>
+        {intl.formatMessage(
+          {
+            defaultMessage: "Room {roomIndex}",
+          },
+          { roomIndex: nr }
+        )}
+      </h2>
+    </Typography>
+  )
+}
+
 export default async function Rooms({
   booking,
   checkInTime,
   checkOutTime,
   mainRoom,
-  linkedReservations,
 }: BookingConfirmationRoomsProps) {
-  const intl = await getIntl()
+  const { linkedReservations } = booking
 
   return (
     <section className={styles.rooms}>
       <div className={styles.room}>
-        {linkedReservations.length ? (
-          <Typography variant="Title/Subtitle/md">
-            <h2 className={styles.roomTitle}>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "Room {roomIndex}",
-                },
-                { roomIndex: 1 }
-              )}
-            </h2>
-          </Typography>
-        ) : null}
+        {linkedReservations.length ? <RoomTitle nr={1} /> : null}
         <Room
-          booking={booking}
+          checkInDate={booking.checkInDate}
+          checkOutDate={booking.checkOutDate}
           checkInTime={checkInTime}
           checkOutTime={checkOutTime}
+          confirmationNumber={booking.confirmationNumber}
+          guaranteeInfo={booking.guaranteeInfo}
+          guest={booking.guest}
           img={mainRoom.images[0]}
+          rateDefinition={booking.rateDefinition}
           roomName={mainRoom.name}
         />
       </div>
 
       {linkedReservations.map((reservation, idx) => (
         <div className={styles.room} key={reservation.confirmationNumber}>
-          <Typography variant="Title/Subtitle/md">
-            <h2 className={styles.roomTitle}>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "Room {roomIndex}",
-                },
-                { roomIndex: idx + 2 }
-              )}
-            </h2>
-          </Typography>
+          <RoomTitle nr={idx + 2} />
           <LinkedReservation
             checkInTime={checkInTime}
             checkOutTime={checkOutTime}
-            confirmationNumber={reservation.confirmationNumber}
+            refId={reservation.refId}
             roomIndex={idx + 1}
           />
         </div>

apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/index.tsx

@@ -27,7 +27,7 @@ export default function Tracking({
     getTracking(
       lang,
       bookingConfirmation.booking,
-      bookingConfirmation.hotel,
+      bookingConfirmation.hotelData.hotel,
       rooms
     )
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts

@@ -67,7 +67,7 @@ function mapAncillaryPackage(
 export function getTracking(
   lang: Lang,
   booking: BookingConfirmation["booking"],
-  hotel: BookingConfirmation["hotel"],
+  hotel: BookingConfirmation["hotelData"]["hotel"],
   rooms: Room[]
 ) {
   const arrivalDate = new Date(booking.checkInDate)

apps/scandic-web/components/HotelReservation/BookingConfirmation/bookingConfirmation.module.css

@@ -1,22 +0,0 @@
-.booking {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x5);
-  grid-area: booking;
-  padding-bottom: var(--Spacing-x9);
-}
-
-.aside {
-  display: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .mobileReceipt {
-    display: none;
-  }
-
-  .aside {
-    display: grid;
-    grid-area: receipt;
-  }
-}

apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx

@@ -1,87 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
-import { encrypt } from "@/server/routers/utils/encryption"
-
-import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
-import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
-import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
-import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
-import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
-import SidePanel from "@/components/HotelReservation/SidePanel"
-import Divider from "@/components/TempDesignSystem/Divider"
-import { getIntl } from "@/i18n"
-import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
-
-import Alerts from "./Alerts"
-import Confirmation from "./Confirmation"
-import Tracking from "./Tracking"
-import { mapRoomState } from "./utils"
-
-import styles from "./bookingConfirmation.module.css"
-
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default async function BookingConfirmation({
-  confirmationNumber,
-}: BookingConfirmationProps) {
-  const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
-
-  if (!bookingConfirmation) {
-    return notFound()
-  }
-  const { booking, hotel, room } = bookingConfirmation
-  if (!room) {
-    return notFound()
-  }
-
-  const refId = encrypt(
-    `${booking.confirmationNumber},${booking.guest.lastName}`
-  )
-
-  const intl = await getIntl()
-  return (
-    <BookingConfirmationProvider
-      bookingCode={booking.bookingCode}
-      currencyCode={booking.currencyCode}
-      fromDate={booking.checkInDate}
-      toDate={booking.checkOutDate}
-      rooms={[
-        mapRoomState(booking, room, intl),
-        // null represents "known but not yet fetched rooms" and is used to render placeholders correctly
-        ...Array(booking.linkedReservations.length).fill(null),
-      ]}
-      vat={booking.vatPercentage}
-    >
-      <Confirmation booking={booking} hotel={hotel} room={room} refId={refId}>
-        <div className={styles.booking}>
-          <Alerts booking={booking} />
-          <Rooms
-            booking={booking}
-            checkInTime={hotel.hotelFacts.checkin.checkInTime}
-            checkOutTime={hotel.hotelFacts.checkin.checkOutTime}
-            mainRoom={room}
-            linkedReservations={booking.linkedReservations}
-          />
-          <PaymentDetails />
-          <Divider color="primaryLightSubtle" />
-          <HotelDetails hotel={hotel} />
-          <Promos
-            confirmationNumber={booking.confirmationNumber}
-            hotelId={hotel.operaId}
-            lastName={booking.guest.lastName}
-          />
-          <div className={styles.mobileReceipt}>
-            <Receipt />
-          </div>
-        </div>
-        <aside className={styles.aside}>
-          <SidePanel variant="receipt">
-            <Receipt />
-          </SidePanel>
-        </aside>
-      </Confirmation>
-      <Tracking bookingConfirmation={bookingConfirmation} />
-    </BookingConfirmationProvider>
-  )
-}

apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts

@@ -5,10 +5,10 @@ import type { IntlShape } from "react-intl"
 import type { BookingConfirmationRoom } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import { CurrencyEnum } from "@/types/enums/currency"
-import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation"
+import type { BookingSchema } from "@/types/trpc/routers/booking/confirmation"
 
 export function mapRoomState(
-  booking: BookingConfirmationSchema,
+  booking: BookingSchema,
   room: BookingConfirmationRoom,
   intl: IntlShape
 ) {

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -135,7 +135,7 @@ export default function ConfirmBooking({
         ) : null}
       </div>
       <div className={styles.checkboxContainer}>
-        <TermsAndConditions />
+        <TermsAndConditions isFlexBookingTerms />
       </div>
     </div>
   )
@@ -156,7 +156,7 @@ export function ConfirmBookingRedemption() {
         </Typography>
       </div>
       <div className={styles.checkboxContainer}>
-        <TermsAndConditions />
+        <TermsAndConditions isFlexBookingTerms />
       </div>
     </div>
   )

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/AutoFillDetector.tsx

@@ -0,0 +1,31 @@
+"use client"
+import { useEffect } from "react"
+import { useFormContext } from "react-hook-form"
+
+export default function AutoFillDetector() {
+  const {
+    formState: { dirtyFields, isDirty, touchedFields },
+    trigger,
+    watch,
+  } = useFormContext()
+
+  useEffect(() => {
+    const dirtyFieldKeys = Object.keys(dirtyFields)
+    const touchedFieldKeys = Object.keys(touchedFields)
+    const hasDirtyUnTouchedFields = dirtyFieldKeys.some(
+      (field) => !touchedFieldKeys.includes(field)
+    )
+    const subscription = watch((_, field) => {
+      if (!field.type) {
+        if (isDirty && hasDirtyUnTouchedFields) {
+          trigger(field.name)
+          trigger("countryCode")
+        }
+      }
+    })
+
+    return () => subscription.unsubscribe()
+  }, [dirtyFields, isDirty, touchedFields, trigger, watch])
+
+  return null
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -11,6 +11,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
 
+import AutoFillDetector from "./AutoFillDetector"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
@@ -150,6 +151,7 @@ export default function Details({ user }: DetailsProps) {
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
         </div>
+        <AutoFillDetector />
       </form>
     </FormProvider>
   )

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/BookingAlert/index.tsx

@@ -1,15 +1,18 @@
 "use client"
 
 import { usePathname, useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { BookingErrorCodeEnum } from "@/constants/booking"
+import { selectRate } from "@/constants/routes/hotelReservation"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import Alert from "@/components/TempDesignSystem/Alert"
+import useLang from "@/hooks/useLang"
+import useStickyPosition from "@/hooks/useStickyPosition"
 
-import styles from "./paymentAlert.module.css"
+import styles from "./bookingAlert.module.css"
 
 import { AlertTypeEnum } from "@/types/enums/alert"
 
@@ -18,6 +21,7 @@ function useBookingErrorAlert() {
     (state) => state.actions.updateSeachParamString
   )
   const intl = useIntl()
+  const lang = useLang()
   const searchParams = useSearchParams()
   const pathname = usePathname()
 
@@ -30,12 +34,19 @@ function useBookingErrorAlert() {
 
   const [showAlert, setShowAlert] = useState(!!errorCode)
 
+  const selectRateReturnUrl = getSelectRateReturnUrl()
+
   function getErrorMessage(errorCode: string | null) {
     switch (errorCode) {
       case BookingErrorCodeEnum.TransactionCancelled:
         return intl.formatMessage({
           defaultMessage: "You have now cancelled your payment.",
         })
+      case BookingErrorCodeEnum.AvailabilityError:
+        return intl.formatMessage({
+          defaultMessage:
+            "Unfortunately, one of the rooms you selected is sold out. Please choose another room to proceed.",
+        })
       default:
         return intl.formatMessage({
           defaultMessage:
@@ -53,16 +64,42 @@ function useBookingErrorAlert() {
     window.history.replaceState({}, "", `${pathname}?${queryParams.toString()}`)
   }
 
-  return { showAlert, errorMessage, severityLevel, discardAlert, setShowAlert }
+  function getSelectRateReturnUrl() {
+    const queryParams = new URLSearchParams(searchParams.toString())
+    queryParams.delete("errorCode")
+    return `${selectRate(lang)}?${queryParams.toString()}`
+  }
+
+  return {
+    showAlert,
+    errorCode,
+    errorMessage,
+    severityLevel,
+    discardAlert,
+    setShowAlert,
+    selectRateReturnUrl,
+  }
 }
 
-interface PaymentAlertProps {
+interface BookingAlertProps {
   isVisible?: boolean
 }
 
-export default function PaymentAlert({ isVisible = false }: PaymentAlertProps) {
-  const { showAlert, errorMessage, severityLevel, discardAlert, setShowAlert } =
-    useBookingErrorAlert()
+export default function BookingAlert({ isVisible = false }: BookingAlertProps) {
+  const intl = useIntl()
+
+  const {
+    showAlert,
+    errorCode,
+    errorMessage,
+    severityLevel,
+    discardAlert,
+    setShowAlert,
+    selectRateReturnUrl,
+  } = useBookingErrorAlert()
+
+  const ref = useRef<HTMLDivElement>(null)
+  const { getTopOffset } = useStickyPosition()
 
   useEffect(() => {
     if (isVisible) {
@@ -70,15 +107,39 @@ export default function PaymentAlert({ isVisible = false }: PaymentAlertProps) {
     }
   }, [isVisible, setShowAlert])
 
+  useEffect(() => {
+    const el = ref.current
+
+    if (showAlert && el) {
+      window.scrollTo({
+        top: el.offsetTop - getTopOffset(),
+        behavior: "smooth",
+      })
+    }
+  }, [showAlert, getTopOffset])
+
   if (!showAlert) return null
 
+  const isAvailabilityError =
+    errorCode === BookingErrorCodeEnum.AvailabilityError
+
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} ref={ref}>
       <Alert
         type={severityLevel}
         variant="inline"
         text={errorMessage}
         close={discardAlert}
+        link={
+          isAvailabilityError
+            ? {
+                title: intl.formatMessage({
+                  defaultMessage: "Change room",
+                }),
+                url: selectRateReturnUrl,
+              }
+            : undefined
+        }
       />
     </div>
   )

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx

@@ -18,12 +18,12 @@ const validBookingStatuses = [
 ]
 
 interface HandleStatusPollingProps {
-  confirmationNumber: string
+  refId: string
   successRedirectUrl: string
 }
 
 export default function HandleSuccessCallback({
-  confirmationNumber,
+  refId,
   successRedirectUrl,
 }: HandleStatusPollingProps) {
   const router = useRouter()
@@ -33,7 +33,7 @@ export default function HandleSuccessCallback({
     error,
     isTimeout,
   } = useHandleBookingStatus({
-    confirmationNumber,
+    refId,
     expectedStatuses: validBookingStatuses,
     maxRetries: 10,
     retryInterval: 2000,
@@ -70,9 +70,9 @@ export default function HandleSuccessCallback({
         ? `&errorCode=${membershipFailedError.errorCode}`
         : ""
 
-      router.replace(`${successRedirectUrl}${errorParam}`)
+      router.replace(`${successRedirectUrl}?RefId=${refId}${errorParam}`)
     }
-  }, [bookingStatus, successRedirectUrl, router])
+  }, [bookingStatus, refId, router, successRedirectUrl])
 
   if (isTimeout || error) {
     return <TimeoutSpinner />

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useRouter, useSearchParams } from "next/navigation"
-import { useCallback, useEffect, useState } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { Label } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -10,8 +10,6 @@ import { useIntl } from "react-intl"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
-  BOOKING_CONFIRMATION_NUMBER,
-  BookingErrorCodeEnum,
   BookingStatusEnum,
   PAYMENT_METHOD_TITLES,
   PaymentMethodEnum,
@@ -31,7 +29,6 @@ import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
-import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { trackPaymentEvent } from "@/utils/tracking"
@@ -42,10 +39,10 @@ import { bedTypeMap } from "../../utils"
 import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
 import PriceChangeDialog from "../PriceChangeDialog"
 import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
+import BookingAlert from "./BookingAlert"
 import GuaranteeDetails from "./GuaranteeDetails"
 import { hasFlexibleRate, hasPrepaidRate, isPaymentMethodEnum } from "./helpers"
 import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
-import PaymentAlert from "./PaymentAlert"
 import PaymentOptionsGroup from "./PaymentOptionsGroup"
 import { type PaymentFormData, paymentSchema } from "./schema"
 import TermsAndConditions from "./TermsAndConditions"
@@ -71,10 +68,11 @@ export default function PaymentClient({
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
+  const pathname = usePathname()
   const searchParams = useSearchParams()
   const { getTopOffset } = useStickyPosition({})
 
-  const [showPaymentAlert, setShowPaymentAlert] = useState(false)
+  const [showBookingAlert, setShowBookingAlert] = useState(false)
 
   const { booking, rooms, totalPrice } = useEnterDetailsStore((state) => ({
     booking: state.booking,
@@ -101,7 +99,7 @@ export default function PaymentClient({
     (state) => state.actions.setIsSubmittingDisabled
   )
 
-  const [bookingNumber, setBookingNumber] = useState<string>("")
+  const [refId, setRefId] = useState<string>("")
   const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
     useState(false)
 
@@ -135,21 +133,25 @@ export default function PaymentClient({
     onSuccess: (result) => {
       if (result) {
         if ("error" in result) {
-          if (result.cause === BookingErrorCodeEnum.AvailabilityError) {
-            window.location.reload() // reload to refetch room data because we dont know which room is unavailable
-          } else {
-            handlePaymentError(result.cause)
-          }
+          const queryParams = new URLSearchParams(searchParams.toString())
+          queryParams.set("errorCode", result.cause)
+          window.history.replaceState(
+            {},
+            "",
+            `${pathname}?${queryParams.toString()}`
+          )
+          handlePaymentError(result.cause)
           return
         }
 
+        const mainRoom = result.rooms[0]
         if (result.reservationStatus == BookingStatusEnum.BookingCompleted) {
-          const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${result.id}`
+          const confirmationUrl = `${bookingConfirmation(lang)}?RefId=${mainRoom.refId}`
           router.push(confirmationUrl)
           return
         }
 
-        setBookingNumber(result.id)
+        setRefId(mainRoom.refId)
 
         const hasPriceChange = result.rooms.some((r) => r.priceChangedMetadata)
         if (hasPriceChange) {
@@ -171,8 +173,8 @@ export default function PaymentClient({
   })
 
   const priceChange = trpc.booking.priceChange.useMutation({
-    onSuccess: (result) => {
-      if (result?.id) {
+    onSuccess: (confirmationNumber) => {
+      if (confirmationNumber) {
         setIsPollingForBookingStatus(true)
       } else {
         handlePaymentError("No confirmation number")
@@ -186,17 +188,43 @@ export default function PaymentClient({
     },
   })
 
-  const bookingStatus = useHandleBookingStatus({
-    confirmationNumber: bookingNumber,
-    expectedStatuses: [BookingStatusEnum.BookingCompleted],
-    maxRetries,
-    retryInterval,
-    enabled: isPollingForBookingStatus,
-  })
+  // Replaced useHandleBookingStatus with logic specifically used here, since the hook would need
+  // to handle different parameters based on use case
+  const retries = useRef(0)
+
+  const bookingStatus = trpc.booking.confirmationCompleted.useQuery(
+    {
+      refId,
+      lang,
+    },
+    {
+      enabled: isPollingForBookingStatus,
+      refetchInterval: (query) => {
+        retries.current = query.state.dataUpdateCount
+
+        if (query.state.error || query.state.dataUpdateCount >= maxRetries) {
+          return false
+        }
+
+        if (
+          query.state.data?.reservationStatus ===
+          BookingStatusEnum.BookingCompleted
+        ) {
+          return false
+        }
+
+        return retryInterval
+      },
+      refetchIntervalInBackground: true,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      retry: false,
+    }
+  )
 
   const handlePaymentError = useCallback(
     (errorMessage: string) => {
-      setShowPaymentAlert(true)
+      setShowBookingAlert(true)
 
       const currentPaymentMethod = methods.getValues("paymentMethod")
       const smsEnable = methods.getValues("smsConfirmation")
@@ -242,18 +270,12 @@ export default function PaymentClient({
   )
 
   useEffect(() => {
-    if (bookingStatus?.data?.paymentUrl) {
-      router.push(bookingStatus.data.paymentUrl)
-    } else if (
-      bookingStatus?.data?.reservationStatus ===
-      BookingStatusEnum.BookingCompleted
-    ) {
-      const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${bookingStatus?.data?.id}`
-      router.push(confirmationUrl)
-    } else if (bookingStatus.isTimeout) {
+    if (bookingStatus?.data?.redirectUrl) {
+      router.push(bookingStatus.data.redirectUrl)
+    } else if (retries.current >= maxRetries) {
       handlePaymentError("Timeout")
     }
-  }, [bookingStatus, router, intl, lang, handlePaymentError])
+  }, [bookingStatus, router, handlePaymentError])
 
   useEffect(() => {
     setIsSubmittingDisabled(
@@ -455,7 +477,7 @@ export default function PaymentClient({
     initiateBooking.isPending ||
     (isPollingForBookingStatus &&
       !bookingStatus.data?.paymentUrl &&
-      !bookingStatus.isTimeout)
+      retries.current < maxRetries)
   ) {
     return <LoadingSpinner />
   }
@@ -480,7 +502,7 @@ export default function PaymentClient({
               ? confirm
               : payment}
         </Title>
-        <PaymentAlert isVisible={showPaymentAlert} />
+        <BookingAlert isVisible={showBookingAlert} />
       </header>
       <FormProvider {...methods}>
         <form
@@ -586,7 +608,7 @@ export default function PaymentClient({
               </section>
 
               <section className={styles.section}>
-                <TermsAndConditions />
+                <TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
               </section>
             </>
           )}
@@ -617,9 +639,7 @@ export default function PaymentClient({
               : ""
             router.push(`${selectRate(lang)}${allSearchParams}`)
           }}
-          onAccept={() =>
-            priceChange.mutate({ confirmationNumber: bookingNumber })
-          }
+          onAccept={() => priceChange.mutate({ refId })}
         />
       ) : null}
     </section>

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx

@@ -12,45 +12,82 @@ import useLang from "@/hooks/useLang"
 
 import styles from "../payment.module.css"
 
-export default function TermsAndConditions() {
+import type { TermsAndConditionsProps } from "@/types/components/hotelReservation/enterDetails/payment"
+
+export default function TermsAndConditions({
+  isFlexBookingTerms,
+}: TermsAndConditionsProps) {
   const intl = useIntl()
   const lang = useLang()
 
   return (
     <>
       <Caption>
-        {intl.formatMessage(
-          {
-            defaultMessage:
-              "I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
-          },
-          {
-            termsAndConditionsLink: (str) => (
-              <Link
-                className={styles.link}
-                variant="underscored"
-                href={bookingTermsAndConditions[lang]}
-                target="_blank"
-                weight="bold"
-                size="small"
-              >
-                {str}
-              </Link>
-            ),
-            privacyPolicyLink: (str) => (
-              <Link
-                className={styles.link}
-                variant="underscored"
-                href={privacyPolicy[lang]}
-                target="_blank"
-                weight="bold"
-                size="small"
-              >
-                {str}
-              </Link>
-            ),
-          }
-        )}
+        {isFlexBookingTerms
+          ? intl.formatMessage(
+              {
+                defaultMessage:
+                  "I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>.",
+              },
+              {
+                termsAndConditionsLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    variant="underscored"
+                    href={bookingTermsAndConditions[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+                privacyPolicyLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    variant="underscored"
+                    href={privacyPolicy[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+              }
+            )
+          : intl.formatMessage(
+              {
+                defaultMessage:
+                  "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
+              },
+              {
+                termsAndConditionsLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    variant="underscored"
+                    href={bookingTermsAndConditions[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+                privacyPolicyLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    variant="underscored"
+                    href={privacyPolicy[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+              }
+            )}
       </Caption>
       <Checkbox name="termsAndConditions">
         <Caption>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useSearchParams } from "next/navigation"
 import { type PropsWithChildren, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
@@ -16,6 +17,8 @@ import styles from "./bottomSheet.module.css"
 export default function SummaryBottomSheet({ children }: PropsWithChildren) {
   const intl = useIntl()
   const scrollY = useRef(0)
+  const searchParams = useSearchParams()
+  const errorCode = searchParams.get("errorCode")
 
   const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } =
     useEnterDetailsStore((state) => ({
@@ -33,18 +36,21 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
     } else {
       document.body.style.position = ""
       document.body.style.top = ""
-      window.scrollTo({
-        top: scrollY.current,
-        left: 0,
-        behavior: "instant",
-      })
+
+      if (!errorCode) {
+        window.scrollTo({
+          top: scrollY.current,
+          left: 0,
+          behavior: "instant",
+        })
+      }
     }
 
     return () => {
       document.body.style.position = ""
       document.body.style.top = ""
     }
-  }, [isSummaryOpen])
+  }, [isSummaryOpen, errorCode])
 
   return (
     <div className={styles.wrapper} data-open={isSummaryOpen}>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -4,6 +4,7 @@ import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -115,17 +116,18 @@ export default function SummaryUI({
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nightsMsg})
         </Body>
-        <Button
+        <IconButton
           onPress={handleToggleSummary}
           className={styles.chevronButton}
-          variant="Icon"
+          theme="Black"
+          style="Muted"
         >
           <MaterialIcon
             icon="keyboard_arrow_down"
             size={20}
             color="CurrentColor"
           />
-        </Button>
+        </IconButton>
       </header>
       <Divider color="primaryLightSubtle" />
       {rooms.map(({ room }, idx) => {

apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx

@@ -18,10 +18,10 @@ import {
 import styles from "./findMyBooking.module.css"
 
 export default function AdditionalInfoForm({
-  confirmationNumber,
+  refId,
   lastName,
 }: {
-  confirmationNumber: string
+  refId: string
   lastName: string
 }) {
   const router = useRouter()
@@ -37,7 +37,7 @@ export default function AdditionalInfoForm({
     const values = form.getValues()
     const value = new URLSearchParams({
       ...values,
-      confirmationNumber,
+      RefId: refId,
       lastName,
     }).toString()
     document.cookie = `bv=${encodeURIComponent(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx

@@ -145,7 +145,7 @@ export default function AddAncillaryFlowModal({
   ) {
     addAncillary.mutate(
       {
-        confirmationNumber: booking.confirmationNumber,
+        refId,
         ancillaryComment: data.optionalText,
         ancillaryDeliveryTime: selectedAncillary?.requiresDeliveryTime
           ? data.deliveryTime
@@ -175,8 +175,8 @@ export default function AddAncillaryFlowModal({
             )
             clearAncillarySessionData()
             closeModal()
-            utils.booking.get.invalidate({
-              confirmationNumber: booking.confirmationNumber,
+            utils.booking.confirmation.invalidate({
+              refId: booking.refId,
             })
             router.refresh()
           } else {
@@ -211,7 +211,7 @@ export default function AddAncillaryFlowModal({
           }
         : undefined
       guaranteeBooking.mutate({
-        confirmationNumber: booking.confirmationNumber,
+        refId,
         language: lang,
         ...(card && { card }),
         success: `${guaranteeRedirectUrl}?status=success&RefId=${encodeURIComponent(refId)}&ancillary=1`,

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx

@@ -10,12 +10,12 @@ import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 export default function RemoveButton({
-  confirmationNumber,
+  refId,
   codes,
   title,
   onSuccess,
 }: {
-  confirmationNumber: string
+  refId: string
   codes: string[]
   title?: string
   onSuccess: () => void
@@ -51,7 +51,7 @@ export default function RemoveButton({
         removePackage.mutate(
           {
             language: lang,
-            confirmationNumber,
+            refId,
             codes,
           },
           {

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -25,6 +25,7 @@ import type {
 export function AddedAncillaries({
   ancillaries,
   booking,
+  refId,
 }: AddedAncillariesProps) {
   const intl = useIntl()
   const router = useRouter()
@@ -126,7 +127,7 @@ export function AddedAncillaries({
                   {booking.confirmationNumber && ancillary.code ? (
                     <div className={styles.actions}>
                       <RemoveButton
-                        confirmationNumber={booking.confirmationNumber}
+                        refId={refId}
                         codes={
                           ancillary.code ===
                           BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST
@@ -192,7 +193,7 @@ export function AddedAncillaries({
                 booking.canModifyAncillaries ? (
                   <div className={styles.actions}>
                     <RemoveButton
-                      confirmationNumber={booking.confirmationNumber}
+                      refId={refId}
                       codes={
                         ancillary.code ===
                         BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx

@@ -20,10 +20,12 @@ import type { Lang } from "@/constants/languages"
 
 export default function GuaranteeAncillaryHandler({
   confirmationNumber,
+  refId,
   returnUrl,
   lang,
 }: {
   confirmationNumber: string
+  refId: string
   returnUrl: string
   lang: Lang
 }) {
@@ -47,7 +49,7 @@ export default function GuaranteeAncillaryHandler({
 
     addAncillary.mutate(
       {
-        confirmationNumber,
+        refId,
         ancillaryComment: formData.optionalText,
         ancillaryDeliveryTime: selectedAncillary.requiresDeliveryTime
           ? formData.deliveryTime
@@ -86,7 +88,7 @@ export default function GuaranteeAncillaryHandler({
         },
       }
     )
-  }, [confirmationNumber, returnUrl, addAncillary, lang, router])
+  }, [confirmationNumber, refId, returnUrl, addAncillary, lang, router])
 
   return <LoadingSpinner />
 }

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

@@ -213,7 +213,11 @@ export function Ancillaries({
           </>
         )}
 
-        <AddedAncillaries booking={booking} ancillaries={uniqueAncillaries} />
+        <AddedAncillaries
+          booking={booking}
+          ancillaries={uniqueAncillaries}
+          refId={refId}
+        />
 
         <AncillaryFlowModalWrapper>
           <AddAncillaryFlowModal

apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/Details.tsx

@@ -64,10 +64,10 @@ export default function Details({ booking, user }: DetailsProps) {
 
   const updateGuest = trpc.booking.update.useMutation({
     onMutate: () => setIsLoading(true),
-    onSuccess: (data) => {
-      if (data) {
-        utils.booking.get.invalidate({
-          confirmationNumber: data.confirmationNumber,
+    onSuccess: (refId) => {
+      if (refId) {
+        utils.booking.confirmation.invalidate({
+          refId,
         })
 
         toast.success(
@@ -99,7 +99,7 @@ export default function Details({ booking, user }: DetailsProps) {
 
   async function onSubmit(data: ModifyContactSchema) {
     updateGuest.mutate({
-      confirmationNumber: booking.confirmationNumber,
+      refId: booking.refId,
       guest: {
         email: data.email,
         phoneNumber: data.phoneNumber,

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

@@ -1,4 +1,5 @@
 "use client"
+
 import { useMyStayStore } from "@/stores/my-stay"
 
 import Details from "./Details"

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

@@ -1,223 +0,0 @@
-import { cookies } from "next/headers"
-import { notFound } from "next/navigation"
-
-import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { dt } from "@/lib/dt"
-import {
-  findBooking,
-  getAncillaryPackages,
-  getBookingConfirmation,
-  getProfileSafely,
-} from "@/lib/trpc/memoizedRequests"
-import { decrypt } from "@/server/routers/utils/encryption"
-
-import { auth } from "@/auth"
-import { getIntl } from "@/i18n"
-import { isValidSession } from "@/utils/session"
-
-import AdditionalInfoForm from "../../FindMyBooking/AdditionalInfoForm"
-import accessBooking, {
-  ACCESS_GRANTED,
-  ERROR_BAD_REQUEST,
-  ERROR_UNAUTHORIZED,
-} from "../accessBooking"
-import Footer from "./Footer"
-import Specification from "./Specification"
-import Total from "./Total"
-
-import styles from "./receipt.module.css"
-
-import { CurrencyEnum } from "@/types/enums/currency"
-
-export async function Receipt({ refId }: { refId: string }) {
-  const value = decrypt(refId)
-  if (!value) {
-    return notFound()
-  }
-  const session = await auth()
-  const isLoggedIn = isValidSession(session)
-
-  const [confirmationNumber, lastName] = value.split(",")
-  const bv = cookies().get("bv")?.value
-  let bookingConfirmation
-  if (isLoggedIn) {
-    bookingConfirmation = await getBookingConfirmation(confirmationNumber)
-  } else if (bv) {
-    const params = new URLSearchParams(bv)
-    const firstName = params.get("firstName")
-    const email = params.get("email")
-
-    if (firstName && email) {
-      bookingConfirmation = await findBooking(
-        confirmationNumber,
-        lastName,
-        firstName,
-        email
-      )
-    } else {
-      return (
-        <RenderAdditionalInfoForm
-          confirmationNumber={confirmationNumber}
-          lastName={lastName}
-        />
-      )
-    }
-  } else {
-    return (
-      <RenderAdditionalInfoForm
-        confirmationNumber={confirmationNumber}
-        lastName={lastName}
-      />
-    )
-  }
-  if (!bookingConfirmation) {
-    return notFound()
-  }
-
-  const { booking, hotel, room } = bookingConfirmation
-  const user = await getProfileSafely()
-  const intl = await getIntl()
-
-  const access = accessBooking(booking.guest, lastName, user, bv)
-
-  if (access === ACCESS_GRANTED) {
-    const ancillaryPackages = await getAncillaryPackages({
-      fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
-      hotelId: hotel.operaId,
-      toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
-    })
-
-    const currency =
-      booking.currencyCode !== CurrencyEnum.POINTS
-        ? booking.currencyCode
-        : (booking.ancillaries.find((a) => a.currency !== CurrencyEnum.POINTS)
-            ?.currency ??
-          booking.packages.find((p) => p.currency !== CurrencyEnum.POINTS)
-            ?.currency)
-
-    return (
-      <main className={styles.main}>
-        <div>
-          <ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
-          <div className={styles.addresses}>
-            <div>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <div>{hotel.name}</div>
-              </Typography>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <div>
-                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
-                </div>
-              </Typography>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
-                  {hotel.contactInformation.email}
-                </div>
-              </Typography>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <div className={styles.tertiary}>
-                  {hotel.contactInformation.phoneNumber}
-                </div>
-              </Typography>
-            </div>
-            <div className={styles.rightColumn}>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                <div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
-              </Typography>
-              {booking.guest.membershipNumber && (
-                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  <div>{`${intl.formatMessage({
-                    defaultMessage: "Member",
-                  })} ${booking.guest.membershipNumber}`}</div>
-                </Typography>
-              )}
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
-                  {booking.guest.email}
-                </div>
-              </Typography>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <div className={styles.tertiary}>
-                  {booking.guest.phoneNumber}
-                </div>
-              </Typography>
-            </div>
-          </div>
-        </div>
-        <Total booking={booking} currency={currency} />
-        <Specification
-          ancillaryPackages={ancillaryPackages}
-          booking={booking}
-          currency={currency}
-        />
-
-        <hr className={styles.divider} />
-
-        <Footer booking={booking} room={room} />
-      </main>
-    )
-  }
-
-  if (access === ERROR_BAD_REQUEST) {
-    return (
-      <main className={styles.main}>
-        <div className={styles.form}>
-          <AdditionalInfoForm
-            confirmationNumber={confirmationNumber}
-            lastName={lastName}
-          />
-        </div>
-      </main>
-    )
-  }
-
-  if (access === ERROR_UNAUTHORIZED) {
-    return (
-      <main className={styles.main}>
-        <div className={styles.logIn}>
-          <Typography variant="Title/md">
-            <h1>
-              {intl.formatMessage({
-                defaultMessage: "You need to be logged in to view your booking",
-              })}
-            </h1>
-          </Typography>
-          <Typography variant="Body/Lead text">
-            <p>
-              {intl.formatMessage({
-                defaultMessage:
-                  "And you need to be logged in with the same member account that made the booking.",
-              })}
-            </p>
-          </Typography>
-        </div>
-      </main>
-    )
-  }
-
-  return notFound()
-}
-
-function RenderAdditionalInfoForm({
-  confirmationNumber,
-  lastName,
-}: {
-  confirmationNumber: string
-  lastName: string
-}) {
-  return (
-    <main className={styles.main}>
-      <div className={styles.form}>
-        <AdditionalInfoForm
-          confirmationNumber={confirmationNumber}
-          lastName={lastName}
-        />
-      </div>
-    </main>
-  )
-}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx

@@ -40,7 +40,7 @@ export default function FinalConfirmation({
     defaultMessage: "We’re sorry that things didn’t work out.",
   })
 
-  const cancelBookingsMutation = trpc.booking.cancelMany.useMutation({
+  const cancelBookingsMutation = trpc.booking.cancel.useMutation({
     onSuccess(data, variables) {
       const allCancellationsWentThrough = data.every((cancelled) => cancelled)
       if (allCancellationsWentThrough) {
@@ -57,7 +57,7 @@ export default function FinalConfirmation({
           )
         } else {
           const cancelledRooms = rooms.filter((r) =>
-            variables.confirmationNumbers.includes(r.confirmationNumber)
+            variables.refIds.includes(r.refId)
           )
           for (const cancelledRoom of cancelledRooms) {
             toast.success(
@@ -93,13 +93,16 @@ export default function FinalConfirmation({
         )
       }
 
-      utils.booking.get.invalidate({
-        confirmationNumber: bookedRoom.confirmationNumber,
-      })
-      utils.booking.linkedReservations.invalidate({
+      utils.booking.confirmation.invalidate({
+        refId: bookedRoom.refId,
         lang,
-        rooms: bookedRoom.linkedReservations,
       })
+
+      utils.booking.linkedReservations.invalidate({
+        refId: bookedRoom.refId,
+        lang,
+      })
+
       closeModal()
     },
     onError() {
@@ -113,13 +116,13 @@ export default function FinalConfirmation({
 
   function cancelBooking() {
     if (Array.isArray(formRooms)) {
-      const confirmationNumbersToCancel = formRooms
+      const refIdsToCancel = formRooms
         .filter((r) => r.checked)
         .map((r) => r.confirmationNumber)
-      if (confirmationNumbersToCancel.length) {
+      if (refIdsToCancel.length) {
         cancelBookingsMutation.mutate({
-          confirmationNumbers: confirmationNumbersToCancel,
-          language: lang,
+          refIds: refIdsToCancel,
+          lang,
         })
       }
     } else {

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx

@@ -54,10 +54,10 @@ export default function Confirmation({
   )
 
   const updateBooking = trpc.booking.update.useMutation({
-    onSuccess: (updatedBooking) => {
-      if (updatedBooking) {
-        utils.booking.get.invalidate({
-          confirmationNumber: updatedBooking.confirmationNumber,
+    onSuccess: (refId) => {
+      if (refId) {
+        utils.booking.confirmation.invalidate({
+          refId,
         })
 
         toast.success(
@@ -86,7 +86,7 @@ export default function Confirmation({
 
   function handleModifyStay() {
     updateBooking.mutate({
-      confirmationNumber: bookedRoom.confirmationNumber,
+      refId: bookedRoom.refId,
       checkInDate,
       checkOutDate,
     })

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx

@@ -60,7 +60,7 @@ export default function Form() {
   const guaranteeRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}${guaranteeCallback(lang)}`
 
   const { guaranteeBooking, isLoading, handleGuaranteeError } =
-    useGuaranteeBooking(confirmationNumber, false, hotelId)
+    useGuaranteeBooking(refId, false, hotelId)
 
   if (isLoading) {
     return (
@@ -85,7 +85,7 @@ export default function Form() {
         : undefined
       writeGlaToSessionStorage("yes", hotelId)
       guaranteeBooking.mutate({
-        confirmationNumber,
+        refId,
         language: lang,
         ...(card && { card }),
         success: `${guaranteeRedirectUrl}?status=success&RefId=${encodeURIComponent(refId)}`,
@@ -105,7 +105,7 @@ export default function Form() {
   const guaranteeMsg = intl.formatMessage(
     {
       defaultMessage:
-        "By guaranteeing with any of the payment methods available, I accept the terms for this stay and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand Scandic will process my personal data for this stay in accordance with <privacyPolicyLink>Scandic's Privacy Policy</privacyPolicyLink>. I accept Scandic requiring a valid credit card during my visit in case anything is left unpaid.",
+        "I accept the terms for this stay and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand Scandic will process my personal data for this stay in accordance with <privacyPolicyLink>Scandic's Privacy Policy</privacyPolicyLink>. ",
     },
     {
       termsAndConditionsLink: (str) => (

apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts

@@ -143,6 +143,7 @@ export function mapRoomDetails({
     priceType,
     rate,
     rateDefinition: booking.rateDefinition,
+    refId: booking.refId,
     reservationStatus: booking.reservationStatus,
     room,
     roomName: room?.name ?? "",

apps/scandic-web/components/HotelReservation/SelectRate/AvailabilityError.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { useEffect } from "react"
+import { useIntl } from "react-intl"
+
+import { BookingErrorCodeEnum } from "@/constants/booking"
+
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+export default function AvailabilityError() {
+  const intl = useIntl()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const errorCode = searchParams.get("errorCode")
+  const hasAvailabilityError =
+    errorCode === BookingErrorCodeEnum.AvailabilityError
+
+  const errorMessage = intl.formatMessage({
+    defaultMessage:
+      "Unfortunately, one of the rooms you selected is sold out. Please choose another room to proceed.",
+  })
+
+  useEffect(() => {
+    if (!hasAvailabilityError) {
+      return
+    }
+
+    toast.error(errorMessage)
+
+    const newParams = new URLSearchParams(searchParams.toString())
+    newParams.delete("errorCode")
+    window.history.replaceState({}, "", `${pathname}?${newParams.toString()}`)
+  }, [errorMessage, hasAvailabilityError, pathname, searchParams])
+
+  return null
+}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx

@@ -3,6 +3,7 @@ import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
@@ -88,13 +89,13 @@ export default function Summary({
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
-        <Button onPress={toggleSummaryOpen} variant="Icon">
+        <IconButton onPress={toggleSummaryOpen} theme="Black" style="Muted">
           <MaterialIcon
             icon="keyboard_arrow_down"
             size={20}
             color="CurrentColor"
           />
-        </Button>
+        </IconButton>
       </header>
       <Divider color="primaryLightSubtle" />
       {rooms.map((room, idx) => {

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx

@@ -7,8 +7,8 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { Button } from "@scandic-hotels/design-system/Button"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -39,9 +39,13 @@ export default function RoomPackageFilterModal() {
                   {intl.formatMessage({ defaultMessage: "Special needs" })}
                 </h3>
               </Typography>
-              <Button variant="Icon" onPress={() => setIsOpen(false)}>
+              <IconButton
+                theme="Black"
+                style="Muted"
+                onPress={() => setIsOpen(false)}
+              >
                 <MaterialIcon icon="close" size={24} color="CurrentColor" />
-              </Button>
+              </IconButton>
             </div>
             <Form close={() => setIsOpen(false)} />
           </Dialog>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Button as AriaButton } from "react-aria-components"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useMediaQuery } from "usehooks-ts"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -69,12 +69,12 @@ export default function RoomPackageFilter() {
                 color="CurrentColor"
               />
               {pkg.description}
-              <AriaButton
+              <ButtonRAC
                 onPress={() => deleteSelectedPackage(pkg.code)}
                 className={styles.removeButton}
               >
                 <MaterialIcon icon="close" size={16} color="CurrentColor" />
-              </AriaButton>
+              </ButtonRAC>
             </span>
           </Typography>
         ))}

apps/scandic-web/components/HotelReservation/SelectRate/index.tsx

@@ -12,6 +12,7 @@ import { setLang } from "@/i18n/serverContext"
 import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
 import { convertSearchParamsToObj } from "@/utils/url"
 
+import AvailabilityError from "./AvailabilityError"
 import { getValidDates } from "./getValidDates"
 import { getTracking } from "./tracking"
 
@@ -90,6 +91,8 @@ export default async function SelectRatePage({
           hotelInfo={hotelsTrackingData}
         />
       </Suspense>
+
+      <AvailabilityError />
     </>
   )
 }

apps/scandic-web/components/Lightbox/FullView/fullView.module.css

@@ -0,0 +1,126 @@
+.fullViewContainer {
+  background-color: var(--UI-Text-High-contrast);
+  height: 100%;
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  position: relative;
+  align-items: center;
+  justify-items: center;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+  place-content: center;
+  gap: var(--Spacing-x5);
+}
+
+.closeButton {
+  position: absolute;
+  top: var(--Space-x2);
+  right: var(--Space-x2);
+  z-index: 1;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.imageCount {
+  background-color: var(--Overlay-90);
+  padding: var(--Space-x025) var(--Space-x05);
+  border-radius: var(--Corner-radius-Small);
+  color: var(--Text-Inverted);
+}
+
+.imageContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-height: 25rem;
+  margin-bottom: var(--Spacing-x5);
+}
+
+.imageWrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.footer {
+  color: var(--Text-Inverted);
+  position: absolute;
+  bottom: calc(-1 * var(--Spacing-x5));
+}
+
+@media screen and (max-width: 767px) {
+  .navigationButton {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1366px) {
+  .fullViewContainer {
+    padding: var(--Spacing-x5);
+  }
+
+  .imageContainer {
+    height: 100%;
+    max-height: 560px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .closeButton {
+    position: fixed;
+    top: var(--Spacing-x-one-and-half);
+    right: var(--Spacing-x-half);
+  }
+
+  .fullViewContainer {
+    margin-top: 0;
+    padding: var(--Spacing-x5);
+    grid-template-rows: auto 1fr auto;
+    width: 100%;
+    height: 100%;
+  }
+
+  .imageContainer {
+    width: 70%;
+    max-width: 1454px;
+    max-height: 700px;
+  }
+
+  .navigationButton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--Component-Button-Inverted-Fill-Default);
+    color: var(--Component-Button-Inverted-On-fill-Default);
+    border-radius: var(--Corner-radius-rounded);
+    padding: 10px;
+    cursor: pointer;
+    border-width: 0;
+    display: flex;
+    z-index: 1;
+    box-shadow: 0px 0px 8px 1px #0000001a;
+
+    &:hover {
+      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+  }
+
+  .fullViewNextButton {
+    right: var(--Spacing-x5);
+  }
+
+  .fullViewPrevButton {
+    left: var(--Spacing-x5);
+  }
+}

apps/scandic-web/components/Lightbox/FullView/index.tsx

@@ -2,15 +2,15 @@
 
 import { AnimatePresence, motion } from "framer-motion"
 import { useState } from "react"
+import { useIntl } from "react-intl"
 
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import styles from "./Lightbox.module.css"
+import styles from "./fullView.module.css"
 
 import type { FullViewProps } from "@/types/components/lightbox/lightbox"
 
@@ -23,6 +23,7 @@ export default function FullView({
   totalImages,
   hideLabel,
 }: FullViewProps) {
+  const intl = useIntl()
   const [animateLeft, setAnimateLeft] = useState(true)
 
   function handleSwipe(offset: number) {
@@ -54,29 +55,26 @@ export default function FullView({
 
   return (
     <div className={styles.fullViewContainer}>
-      <Button
-        intent="text"
-        size="small"
-        variant="icon"
-        className={styles.fullViewCloseButton}
-        onClick={onClose}
+      <IconButton
+        theme="Inverted"
+        style="Muted"
+        className={styles.closeButton}
+        onPress={onClose}
+        aria-label={intl.formatMessage({
+          defaultMessage: "Close",
+        })}
       >
-        <MaterialIcon
-          icon="close"
-          size={32}
-          className={styles.fullViewCloseIcon}
-          color="Icon/Inverted"
-        />
-      </Button>
-      <div className={styles.fullViewHeader}>
-        <span className={styles.imagePosition}>
-          <Caption color="white">
+        <MaterialIcon icon="close" color="CurrentColor" size={24} />
+      </IconButton>
+      <div className={styles.header}>
+        <Typography variant="Tag/sm">
+          <span className={styles.imageCount}>
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {`${currentIndex + 1} / ${totalImages}`}
-          </Caption>
-        </span>
+          </span>
+        </Typography>
       </div>
-      <div className={styles.fullViewImageContainer}>
+      <div className={styles.imageContainer}>
         <AnimatePresence initial={false} custom={animateLeft}>
           <motion.div
             key={image.src}
@@ -86,7 +84,7 @@ export default function FullView({
             animate="animate"
             exit="exit"
             transition={{ duration: 0.3 }}
-            className={styles.fullViewImage}
+            className={styles.imageWrapper}
             drag="x"
             onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
           >
@@ -95,14 +93,14 @@ export default function FullView({
               fill
               sizes="(min-width: 1500px) 1500px, 100vw"
               src={image.src}
-              style={{ objectFit: "cover" }}
+              className={styles.image}
             />
 
-            <div className={styles.fullViewFooter}>
-              {image.caption && !hideLabel && (
-                <Body color="white">{image.caption}</Body>
-              )}
-            </div>
+            {image.caption && !hideLabel ? (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p className={styles.footer}>{image.caption}</p>
+              </Typography>
+            ) : null}
           </motion.div>
         </AnimatePresence>
       </div>
@@ -112,8 +110,8 @@ export default function FullView({
         onClick={handlePrev}
       >
         <MaterialIcon
-          icon="arrow_forward"
-          color="Icon/Interactive/Default"
+          icon="arrow_back"
+          color="CurrentColor"
           className={styles.leftTransformIcon}
         />
       </motion.button>
@@ -121,7 +119,7 @@ export default function FullView({
         className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
         onClick={handleNext}
       >
-        <MaterialIcon icon="arrow_forward" color="Icon/Interactive/Default" />
+        <MaterialIcon icon="arrow_forward" color="CurrentColor" />
       </motion.button>
     </div>
   )

apps/scandic-web/components/Lightbox/Gallery/gallery.module.css

@@ -0,0 +1,160 @@
+.galleryContainer {
+  display: grid;
+  gap: var(--Space-x2);
+  padding: var(--Space-x2);
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--Base-Background-Primary-Normal);
+}
+
+.mobileGallery {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Space-x1);
+  padding-bottom: var(--Space-x3);
+}
+
+.thumbnailContainer {
+  position: relative;
+  height: 242px;
+}
+
+.fullWidthImage {
+  grid-column: 1 / -1;
+  height: 240px;
+}
+
+.imageButton {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  border-width: 0;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+  z-index: 0;
+
+  &:focus-visible {
+    outline-offset: -2px; /* Adjust the outline offset as wrappers uses overflow-hidden */
+  }
+}
+
+.image {
+  transition: opacity 0.3s ease-in-out;
+  object-fit: cover;
+  z-index: -1;
+}
+
+@media screen and (max-width: 767px) {
+  .desktopCloseIcon,
+  .desktopGallery {
+    display: none;
+  }
+
+  .closeButton {
+    justify-self: start;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .mobileGallery,
+  .mobileCloseIcon {
+    display: none;
+  }
+
+  .galleryContainer {
+    padding: var(--Spacing-x5) var(--Spacing-x6);
+  }
+
+  .closeButton {
+    position: absolute;
+    top: var(--Space-x2);
+    right: var(--Space-x2);
+    z-index: 1;
+  }
+
+  .desktopGallery {
+    display: grid;
+    grid-template-rows: 28px 1fr 7.8125rem;
+    row-gap: var(--Spacing-x-one-and-half);
+    background-color: var(--Base-Background-Primary-Normal);
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .galleryHeader {
+    display: flex;
+    align-items: center;
+  }
+
+  .imageCaption {
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Spacing-x-half) var(--Spacing-x1);
+    border-radius: var(--Corner-radius-Small);
+    color: var(--Text-Secondary);
+  }
+
+  .mainImageWrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .mainImageContainer {
+    width: 100%;
+    height: 100%;
+    will-change: transform;
+    position: absolute;
+  }
+
+  .desktopThumbnailGrid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: var(--Spacing-x1);
+    max-height: 7.8125rem;
+    overflow: hidden;
+  }
+
+  .thumbnailContainer {
+    height: 125px;
+  }
+
+  .fullWidthImage {
+    grid-column: auto;
+    height: auto;
+  }
+
+  .thumbnailContainer img {
+    border-radius: var(--Corner-radius-Small);
+  }
+
+  .navigationButton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--Component-Button-Inverted-Fill-Default);
+    color: var(--Component-Button-Inverted-On-fill-Default);
+    border-radius: var(--Corner-radius-rounded);
+    padding: 10px;
+    cursor: pointer;
+    border-width: 0;
+    display: flex;
+    z-index: 1;
+    box-shadow: 0px 0px 8px 1px #0000001a;
+
+    &:hover {
+      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+  }
+
+  .galleryPrevButton {
+    left: var(--Spacing-x2);
+  }
+
+  .galleryNextButton {
+    right: var(--Spacing-x2);
+  }
+}

apps/scandic-web/components/Lightbox/Gallery/index.tsx

@@ -1,15 +1,16 @@
 "use client"
 import { AnimatePresence, motion } from "framer-motion"
 import { useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import styles from "./Lightbox.module.css"
+import styles from "./gallery.module.css"
 
 import type { GalleryProps } from "@/types/components/lightbox/lightbox"
 
@@ -61,36 +62,38 @@ export default function Gallery({
 
   return (
     <div className={styles.galleryContainer}>
-      <Button
-        intent="text"
-        size="small"
+      <IconButton
+        theme="Black"
+        style="Muted"
         className={styles.closeButton}
-        onClick={onClose}
+        onPress={onClose}
         aria-label={intl.formatMessage({
           defaultMessage: "Close",
         })}
       >
         <MaterialIcon
           icon="chevron_left"
-          color="Icon/Intense"
-          size={32}
+          color="CurrentColor"
+          size={24}
           className={styles.mobileCloseIcon}
         />
         <MaterialIcon
           icon="close"
-          size={32}
+          color="CurrentColor"
+          size={24}
           className={styles.desktopCloseIcon}
         />
-      </Button>
+      </IconButton>
+
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
-        <div className={styles.galleryHeader}>
-          {mainImage.caption && !hideLabel && (
-            <div className={styles.imageCaption}>
-              <Caption color="textMediumContrast">{mainImage.caption}</Caption>
-            </div>
-          )}
-        </div>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p className={styles.galleryHeader}>
+            {mainImage.caption && !hideLabel && (
+              <span className={styles.imageCaption}>{mainImage.caption}</span>
+            )}
+          </p>
+        </Typography>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} custom={animateLeft}>
             <motion.div
@@ -103,34 +106,34 @@ export default function Gallery({
               exit="exit"
               transition={{ duration: 0.3 }}
             >
-              <Image
-                src={mainImage.src}
-                alt={mainImage.alt}
-                fill
-                sizes="(min-width: 1000px) 1000px, 100vw"
-                className={styles.image}
-                onClick={onImageClick}
-              />
+              <ButtonRAC
+                onPress={onImageClick}
+                className={styles.imageButton}
+                aria-label={intl.formatMessage({
+                  defaultMessage: "Open image",
+                })}
+              >
+                <Image
+                  src={mainImage.src}
+                  alt={mainImage.alt}
+                  fill
+                  sizes="(min-width: 1000px) 1000px, 100vw"
+                  className={styles.image}
+                />
+              </ButtonRAC>
             </motion.div>
           </AnimatePresence>
           <motion.button
             className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
             onClick={handlePrev}
           >
-            <MaterialIcon
-              icon="arrow_forward"
-              color="Icon/Interactive/Default"
-              className={styles.leftTransformIcon}
-            />
+            <MaterialIcon icon="arrow_back" color="CurrentColor" />
           </motion.button>
           <motion.button
             className={`${styles.navigationButton} ${styles.galleryNextButton}`}
             onClick={handleNext}
           >
-            <MaterialIcon
-              icon="arrow_forward"
-              color="Icon/Interactive/Default"
-            />
+            <MaterialIcon icon="arrow_forward" color="CurrentColor" />
           </motion.button>
         </div>
         <div className={styles.desktopThumbnailGrid}>
@@ -139,19 +142,26 @@ export default function Gallery({
               <motion.div
                 key={image.smallSrc || image.src}
                 className={styles.thumbnailContainer}
-                onClick={() => onSelectImage(image)}
                 initial={{ opacity: 0, x: 50 }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: -50 }}
                 transition={{ duration: 0.2, delay: index * 0.05 }}
               >
-                <Image
-                  src={image.smallSrc || image.src}
-                  alt={image.alt}
-                  fill
-                  sizes="200px"
-                  className={styles.image}
-                />
+                <ButtonRAC
+                  className={styles.imageButton}
+                  onPress={() => onSelectImage(image)}
+                  aria-label={intl.formatMessage({
+                    defaultMessage: "Open image",
+                  })}
+                >
+                  <Image
+                    src={image.smallSrc || image.src}
+                    alt={image.alt}
+                    fill
+                    sizes="200px"
+                    className={styles.image}
+                  />
+                </ButtonRAC>
               </motion.div>
             ))}
           </AnimatePresence>
@@ -160,31 +170,32 @@ export default function Gallery({
 
       {/* Mobile Gallery */}
       <div className={styles.mobileGallery}>
-        <div className={styles.mobileGalleryContent}>
-          <div className={styles.thumbnailGrid}>
-            {images.map((image, index) => (
-              <motion.div
-                key={image.smallSrc || image.src}
-                className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
-                onClick={() => {
-                  onSelectImage(image)
-                  onImageClick()
-                }}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.3, delay: index * 0.05 }}
-              >
-                <Image
-                  src={image.smallSrc || image.src}
-                  alt={image.alt}
-                  fill
-                  sizes="100vw"
-                  className={styles.image}
-                />
-              </motion.div>
-            ))}
-          </div>
-        </div>
+        {images.map((image, index) => (
+          <motion.div
+            key={image.smallSrc || image.src}
+            className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: index * 0.05 }}
+          >
+            <ButtonRAC
+              className={styles.imageButton}
+              aria-label={intl.formatMessage({ defaultMessage: "Open image" })}
+              onPress={() => {
+                onSelectImage(image)
+                onImageClick()
+              }}
+            >
+              <Image
+                src={image.smallSrc || image.src}
+                alt={image.alt}
+                fill
+                sizes="100vw"
+                className={styles.image}
+              />
+            </ButtonRAC>
+          </motion.div>
+        ))}
       </div>
     </div>
   )

apps/scandic-web/components/Lightbox/Lightbox.module.css

@@ -1,348 +0,0 @@
-@keyframes darken-background {
-  from {
-    background-color: rgba(0, 0, 0, 0);
-  }
-
-  to {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-}
-
-.mobileGallery {
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-}
-
-.closeButton {
-  justify-content: flex-start;
-  width: fit-content;
-}
-.closeButton .desktopCloseIcon {
-  display: none;
-}
-
-.mobileGalleryContent {
-  display: block;
-}
-
-.fullViewCloseButton {
-  position: absolute;
-  top: var(--Spacing-x-one-and-half);
-  right: var(--Spacing-x-half);
-  z-index: 1;
-}
-
-.fullViewCloseButton:hover .fullViewCloseIcon {
-  background-color: var(--UI-Text-Medium-contrast);
-  border-radius: 50%;
-}
-
-.leftTransformIcon {
-  transform: scaleX(-1);
-}
-
-.content {
-  width: 100%;
-  height: 100%;
-  border-radius: 0;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: var(--lightbox-z-index);
-}
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: var(--lightbox-z-index);
-}
-
-.overlay[data-entering] {
-  animation: darken-background 0.2s;
-}
-
-.overlay[data-exiting] {
-  animation: darken-background 0.2s reverse;
-}
-
-.galleryContainer {
-  background-color: var(--Base-Background-Primary-Normal);
-  padding: var(--Spacing-x2);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow-y: auto;
-}
-
-.galleryHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 1.71875rem;
-}
-
-.desktopGallery,
-.desktopThumbnailGrid,
-.navigationButton {
-  display: none;
-}
-
-.imageCaption {
-  background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  border-radius: var(--Corner-radius-Small);
-}
-
-.mainImageWrapper {
-  position: relative;
-  width: 100%;
-}
-
-.mainImageContainer {
-  width: 100%;
-  height: 100%;
-  will-change: transform;
-  overflow: hidden;
-  position: absolute;
-}
-
-.mainImageContainer img,
-.thumbnailContainer img {
-  border-radius: var(--Corner-radius-Small);
-  cursor: pointer;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.thumbnailGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--Spacing-x1);
-  max-height: none;
-  padding: var(--Spacing-x3) 0;
-}
-
-.thumbnailContainer {
-  position: relative;
-  height: 242px;
-}
-
-.fullWidthImage {
-  grid-column: 1 / -1;
-  height: 240px;
-}
-
-.thumbnailContainer img {
-  border-radius: var(--Corner-radius-Medium);
-}
-
-.fullViewContainer {
-  background-color: var(--UI-Text-High-contrast);
-  height: 100%;
-  padding: var(--Spacing-x2);
-  position: relative;
-  align-items: center;
-  justify-items: center;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 1fr;
-  place-content: center;
-  gap: var(--Spacing-x5);
-}
-
-.fullViewHeader {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.fullViewImageContainer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  max-height: 25rem;
-  margin-bottom: var(--Spacing-x5);
-}
-
-.fullViewImage {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--Corner-radius-Medium);
-}
-
-.fullViewImageContainer img {
-  border-radius: var(--Corner-radius-Medium);
-  width: 100%;
-  height: 100%;
-}
-
-.fullViewFooter {
-  position: absolute;
-  bottom: calc(-1 * var(--Spacing-x5));
-}
-
-.imagePosition {
-  background-color: var(--UI-Grey-90);
-  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Small);
-}
-
-.portraitImage {
-  max-width: 548px;
-}
-
-.image {
-  object-fit: cover;
-}
-@media (min-width: 768px) and (max-width: 1366px) {
-  .fullViewContainer {
-    padding: var(--Spacing-x5);
-  }
-
-  .fullViewImageContainer {
-    height: 100%;
-    max-height: 35rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .mobileGallery,
-  .thumbnailGrid {
-    display: none;
-  }
-
-  .content {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    overflow: hidden;
-  }
-
-  .content:not(.fullViewContent) {
-    border-radius: var(--Corner-radius-Large);
-  }
-
-  .galleryContent {
-    width: 1090px;
-    width: min(var(--max-width-page), 1090px);
-    height: min(725px, 85dvh);
-  }
-
-  .fullViewContent {
-    width: 100vw;
-    height: 100vh;
-  }
-
-  .galleryContainer {
-    padding: var(--Spacing-x5) var(--Spacing-x6);
-  }
-
-  .desktopGallery {
-    display: grid;
-    grid-template-rows: 1.71875rem 1fr 7.8125rem;
-    row-gap: var(--Spacing-x-one-and-half);
-    background-color: var(--Base-Background-Primary-Normal);
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .closeButton {
-    display: block;
-    position: absolute;
-    top: var(--Spacing-x-one-and-half);
-    right: var(--Spacing-x1);
-    z-index: 1;
-  }
-
-  .closeButton .mobileCloseIcon {
-    display: none;
-  }
-  .closeButton .desktopCloseIcon {
-    display: block;
-  }
-
-  .closeButton:hover .desktopCloseIcon {
-    background-color: var(--Base-Surface-Primary-light-Hover-alt);
-    border-radius: 50%;
-  }
-
-  .desktopThumbnailGrid {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: var(--Spacing-x1);
-    max-height: 7.8125rem;
-    overflow: hidden;
-  }
-
-  .thumbnailContainer {
-    height: 125px;
-  }
-
-  .fullViewCloseButton {
-    position: fixed;
-    top: var(--Spacing-x-one-and-half);
-    right: var(--Spacing-x-half);
-  }
-
-  .fullWidthImage {
-    grid-column: auto;
-    height: auto;
-  }
-
-  .thumbnailContainer img {
-    border-radius: var(--Corner-radius-Small);
-  }
-
-  .fullViewContainer {
-    margin-top: 0;
-    padding: var(--Spacing-x5);
-    grid-template-rows: auto 1fr auto;
-    width: 100%;
-    height: 100%;
-  }
-
-  .fullViewImageContainer {
-    width: 70%;
-    max-width: 90.875rem;
-    max-height: 43.75rem;
-  }
-
-  .navigationButton {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: var(--Base-Button-Inverted-Fill-Normal);
-    border-radius: 50%;
-    padding: var(--Spacing-x1);
-    cursor: pointer;
-    border: none;
-    display: flex;
-    z-index: 1;
-  }
-
-  .galleryPrevButton {
-    left: var(--Spacing-x2);
-  }
-
-  .galleryNextButton {
-    right: var(--Spacing-x2);
-  }
-
-  .fullViewNextButton {
-    right: var(--Spacing-x5);
-  }
-
-  .fullViewPrevButton {
-    left: var(--Spacing-x5);
-  }
-
-  .fullViewFooter {
-    text-align: left;
-  }
-}

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

@@ -6,7 +6,7 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import FullView from "./FullView"
 import Gallery from "./Gallery"
 
-import styles from "./Lightbox.module.css"
+import styles from "./lightbox.module.css"
 
 import type { LightboxProps } from "@/types/components/lightbox/lightbox"
 

apps/scandic-web/components/Lightbox/lightbox.module.css

@@ -0,0 +1,57 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: var(--lightbox-z-index);
+
+  &[data-entering] {
+    animation: darken-background 0.2s;
+  }
+
+  &[data-exiting] {
+    animation: darken-background 0.2s reverse;
+  }
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: var(--lightbox-z-index);
+}
+
+@media screen and (min-width: 768px) {
+  .content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+
+    &:not(.fullViewContent) {
+      border-radius: var(--Corner-radius-Large);
+    }
+
+    &.fullViewContent {
+      width: 100vw;
+      height: 100vh;
+    }
+
+    &.galleryContent {
+      width: min(var(--max-width-page), 1090px);
+      height: min(725px, 85dvh);
+    }
+  }
+}
+
+@keyframes darken-background {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx

@@ -19,7 +19,8 @@ export default function RoomDetails({
 }: RoomDetailsProps) {
   const intl = useIntl()
 
-  const sortedFacilities = roomFacilities
+  const filteredSortedFacilities = roomFacilities
+    .filter((facility) => !!facility.isUniqueSellingPoint)
     .sort((a, b) => a.sortOrder - b.sortOrder)
     .map((facility) => {
       const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
@@ -45,14 +46,28 @@ export default function RoomDetails({
           </p>
         </Typography>
         <ul className={styles.facilityList}>
-          {sortedFacilities.map(({ name, Icon }) => (
-            <li key={name}>
-              {Icon && Icon}
-              <Typography variant="Body/Paragraph/mdRegular">
-                <span className={styles.listText}>{name}</span>
-              </Typography>
-            </li>
-          ))}
+          {filteredSortedFacilities.map(
+            ({ name, Icon, availableInAllRooms }) => (
+              <li key={name}>
+                {Icon}
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span className={styles.listText}>
+                    {availableInAllRooms
+                      ? name
+                      : intl.formatMessage(
+                          {
+                            defaultMessage:
+                              "{facility} (available in some rooms)",
+                          },
+                          {
+                            facility: name,
+                          }
+                        )}
+                  </span>
+                </Typography>
+              </li>
+            )
+          )}
         </ul>
       </div>
       <div className={styles.listContainer}>

apps/scandic-web/constants/booking.ts

@@ -37,8 +37,6 @@ export enum ChildBedTypeEnum {
 export const REDEMPTION = "redemption"
 export const SEARCHTYPE = "searchtype"
 
-export const BOOKING_CONFIRMATION_NUMBER = "confirmationNumber"
-
 export const MEMBERSHIP_FAILED_ERROR = "MembershipFailedError"
 
 export enum PaymentMethodEnum {

apps/scandic-web/hooks/booking/useGuaranteeBooking.ts

@@ -13,7 +13,7 @@ const maxRetries = 15
 const retryInterval = 2000
 
 export function useGuaranteeBooking(
-  confirmationNumber: string,
+  refId: string,
   isAncillaryFlow = false,
   hotelId: string
 ) {
@@ -51,10 +51,10 @@ export function useGuaranteeBooking(
     onSuccess: (result) => {
       if (result) {
         if (result.reservationStatus == BookingStatusEnum.BookingCompleted) {
-          utils.booking.get.invalidate({ confirmationNumber })
+          utils.booking.confirmation.invalidate({ refId })
         } else {
           setIsPollingForBookingStatus(true)
-          utils.booking.status.invalidate({ confirmationNumber })
+          utils.booking.status.invalidate({ refId })
         }
       } else {
         handleGuaranteeError()
@@ -66,7 +66,7 @@ export function useGuaranteeBooking(
   })
 
   const bookingStatus = useHandleBookingStatus({
-    confirmationNumber,
+    refId,
     expectedStatuses: [BookingStatusEnum.BookingCompleted],
     maxRetries,
     retryInterval,
@@ -76,7 +76,7 @@ export function useGuaranteeBooking(
   useEffect(() => {
     if (bookingStatus?.data?.paymentUrl && isPollingForBookingStatus) {
       router.push(bookingStatus.data.paymentUrl)
-      utils.booking.get.invalidate({ confirmationNumber })
+      utils.booking.confirmation.invalidate({ refId })
       setIsPollingForBookingStatus(false)
     } else if (bookingStatus.isTimeout) {
       handleGuaranteeError("Timeout")
@@ -87,8 +87,8 @@ export function useGuaranteeBooking(
     handleGuaranteeError,
     setIsPollingForBookingStatus,
     isPollingForBookingStatus,
-    confirmationNumber,
-    utils.booking.get,
+    refId,
+    utils.booking.confirmation,
   ])
 
   const isLoading =

apps/scandic-web/hooks/booking/useHandleBookingStatus.ts

@@ -7,13 +7,13 @@ import { trpc } from "@/lib/trpc/client"
 import type { BookingStatusEnum } from "@/constants/booking"
 
 export function useHandleBookingStatus({
-  confirmationNumber,
+  refId,
   expectedStatuses,
   maxRetries,
   retryInterval,
   enabled,
 }: {
-  confirmationNumber: string | null
+  refId: string
   expectedStatuses: BookingStatusEnum[]
   maxRetries: number
   retryInterval: number
@@ -22,7 +22,7 @@ export function useHandleBookingStatus({
   const retries = useRef(0)
 
   const query = trpc.booking.status.useQuery(
-    { confirmationNumber: confirmationNumber ?? "" },
+    { refId },
     {
       enabled,
       refetchInterval: (query) => {

apps/scandic-web/hooks/useStickyPosition.ts

@@ -24,7 +24,7 @@ let resizeObserver: ResizeObserver | null = null
  * This hook registers an element as sticky, calculates its top offset based on
  * other registered sticky elements, and updates the element's position dynamically.
  *
- * @param {UseStickyPositionProps} props - The properties for configuring the hook.
+ * @param {UseStickyPositionProps} [props] - The properties for configuring the hook.
  * @param {React.RefObject<HTMLElement>} [props.ref] - A reference to the HTML element that should be sticky. Is optional to allow for other components to only get the height of the sticky elements.
  * @param {StickyElementNameEnum} [props.name] - A unique name for the sticky element, used for tracking.
  * @param {string} [props.group] - An optional group identifier to make multiple elements share the same top offset. Defaults to the name if not provided.
@@ -37,7 +37,7 @@ export default function useStickyPosition({
   ref,
   name,
   group,
-}: UseStickyPositionProps) {
+}: UseStickyPositionProps = {}) {
   const {
     registerSticky,
     unregisterSticky,

apps/scandic-web/lib/api/index.ts

@@ -100,14 +100,19 @@ export async function put(
 
 export async function remove(
   endpoint: Endpoint | `${Endpoint}/${string}`,
-  options: RequestOptionsWithOutBody,
+  options: RequestOptionsWithJSONBody,
   params = {}
 ) {
+  const { body, ...requestOptions } = options
   const url = new URL(env.API_BASEURL)
   url.pathname = endpoint
   url.search = new URLSearchParams(params).toString()
   return wrappedFetch(
     url,
-    merge.all([defaultOptions, { method: "DELETE" }, options])
+    merge.all([
+      defaultOptions,
+      { body: JSON.stringify(body), method: "DELETE" },
+      requestOptions,
+    ])
   )
 }

apps/scandic-web/lib/trpc/memoizedRequests/index.ts

@@ -1,3 +1,4 @@
+import { getHotel as _getHotel } from "@/server/routers/hotels/utils"
 import { isDefined } from "@/server/utils"
 
 import { getLang } from "@/i18n/serverContext"
@@ -17,7 +18,6 @@ import type {
   HotelInput,
 } from "@/types/trpc/routers/hotel/hotel"
 import type { Lang } from "@/constants/languages"
-import type { LinkedReservationsInput } from "@/server/routers/booking/input"
 import type { GetHotelsByCSFilterInput } from "@/server/routers/hotels/input"
 import type { GetSavedPaymentCardsInput } from "@/server/routers/user/input"
 
@@ -136,8 +136,11 @@ export const getPackages = cache(async function getMemoizedPackages(
 })
 
 export const getBookingConfirmation = cache(
-  async function getMemoizedBookingConfirmation(confirmationNumber: string) {
-    return serverClient().booking.get({ confirmationNumber })
+  async function getMemoizedBookingConfirmation(refId: string, lang: Lang) {
+    return serverClient().booking.confirmation({
+      refId,
+      lang,
+    })
   }
 )
 
@@ -156,8 +159,11 @@ export const findBooking = cache(async function getMemoizedFindBooking(
 })
 
 export const getLinkedReservations = cache(
-  async function getMemoizedLinkedReservations(input: LinkedReservationsInput) {
-    return serverClient().booking.linkedReservations(input)
+  async function getMemoizedLinkedReservations(refId: string, lang: Lang) {
+    return serverClient().booking.linkedReservations({
+      refId,
+      lang,
+    })
   }
 )
 

apps/scandic-web/next.config.js

@@ -285,11 +285,6 @@ const nextConfig = {
           source: `${myPages.sv}/:path*`,
           destination: `/sv/my-pages/:path*`,
         },
-        {
-          source: "/:lang/hotelreservation/payment-callback/:status",
-          destination:
-            "/:lang/hotelreservation/payment-callback?status=:status",
-        },
         // Find my booking
         {
           source: findMyBooking.en,

apps/scandic-web/providers/MyStay.tsx

@@ -1,9 +1,10 @@
 "use client"
+
 import { notFound } from "next/navigation"
 import { use, useRef } from "react"
 import { useIntl } from "react-intl"
 
-import { trpc } from "@/lib/trpc/client"
+import { type RouterOutput, trpc } from "@/lib/trpc/client"
 import { createMyStayStore } from "@/stores/my-stay"
 
 import { MyStaySkeleton } from "@/components/HotelReservation/MyStay/myStaySkeleton"
@@ -12,10 +13,7 @@ import { MyStayContext } from "@/contexts/MyStay"
 import type { Packages } from "@/types/components/myPages/myStay/ancillaries"
 import type { MyStayStore } from "@/types/contexts/my-stay"
 import type { RoomCategories } from "@/types/hotel"
-import type {
-  BookingConfirmation,
-  BookingConfirmationSchema,
-} from "@/types/trpc/routers/booking/confirmation"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 import type { CreditCard } from "@/types/user"
 import type { Lang } from "@/constants/languages"
 
@@ -23,7 +21,9 @@ interface MyStayProviderProps {
   bookingConfirmation: BookingConfirmation
   breakfastPackages: Packages | null
   lang: Lang
-  linkedReservationsPromise: Promise<BookingConfirmationSchema[]>
+  linkedReservationsPromise: Promise<
+    RouterOutput["booking"]["linkedReservations"]
+  >
   refId: string
   roomCategories: RoomCategories
   savedCreditCards: CreditCard[] | null
@@ -39,13 +39,14 @@ export default function MyStayProvider({
   roomCategories,
   savedCreditCards,
 }: React.PropsWithChildren<MyStayProviderProps>) {
-  const storeRef = useRef<MyStayStore>()
   const intl = useIntl()
 
+  const storeRef = useRef<MyStayStore>()
+
   const { data, error, isFetching, isFetchedAfterMount } =
-    trpc.booking.get.useQuery(
+    trpc.booking.confirmation.useQuery(
       {
-        confirmationNumber: bookingConfirmation.booking.confirmationNumber,
+        refId,
         lang,
       },
       {
@@ -68,7 +69,7 @@ export default function MyStayProvider({
   } = trpc.booking.linkedReservations.useQuery(
     {
       lang,
-      rooms: bookingConfirmation.booking.linkedReservations,
+      refId,
     },
     {
       initialData: linkedReservationsResponses,
@@ -85,15 +86,16 @@ export default function MyStayProvider({
     return notFound()
   }
 
-  const rooms = [data.booking, ...linkedReservations]
+  const rooms = [data.booking].concat(linkedReservations ?? [])
 
   const hasInvalidatedQueryAndRefetched =
     (isFetchedAfterMount && data) ||
     (linkedReservationsIsFetchedAfterMount && linkedReservations)
+
   if (!storeRef.current || hasInvalidatedQueryAndRefetched) {
     storeRef.current = createMyStayStore({
       breakfastPackages,
-      hotel: bookingConfirmation.hotel,
+      hotel: bookingConfirmation.hotelData.hotel,
       intl,
       refId,
       roomCategories,

apps/scandic-web/server/routers/booking/input.ts

@@ -103,7 +103,7 @@ export const createBookingInput = z.object({
 })
 
 export const addPackageInput = z.object({
-  confirmationNumber: z.string(),
+  refId: z.string(),
   ancillaryComment: z.string(),
   ancillaryDeliveryTime: z.string().nullish(),
   packages: z.array(
@@ -117,27 +117,22 @@ export const addPackageInput = z.object({
 })
 
 export const removePackageInput = z.object({
-  confirmationNumber: z.string(),
+  refId: z.string(),
   codes: z.array(z.string()),
   language: z.nativeEnum(Lang).transform((val) => langToApiLang[val]),
 })
 
 export const priceChangeInput = z.object({
-  confirmationNumber: z.string(),
+  refId: z.string(),
 })
 
-export const cancelBookingInput = z.object({
-  confirmationNumber: z.string(),
-  language: z.nativeEnum(Lang).transform((val) => langToApiLang[val]),
-})
-
-export const cancelManyBookingsInput = z.object({
-  confirmationNumbers: z.array(z.string()),
-  language: z.nativeEnum(Lang).transform((val) => langToApiLang[val]),
+export const cancelBookingsInput = z.object({
+  refIds: z.array(z.string()),
+  lang: z.nativeEnum(Lang),
 })
 
 export const guaranteeBookingInput = z.object({
-  confirmationNumber: z.string(),
+  refId: z.string(),
   card: z
     .object({
       alias: z.string(),
@@ -161,7 +156,7 @@ export const createRefIdInput = z.object({
 })
 
 export const updateBookingInput = z.object({
-  confirmationNumber: z.string(),
+  refId: z.string(),
   checkInDate: z.string().optional(),
   checkOutDate: z.string().optional(),
   guest: z
@@ -173,20 +168,14 @@ export const updateBookingInput = z.object({
     .optional(),
 })
 
-// Query
-const confirmationNumberInput = z.object({
-  confirmationNumber: z.string(),
+export const bookingConfirmationInput = z.object({
+  refId: z.string(),
   lang: z.nativeEnum(Lang).optional(),
 })
 
-export const getBookingInput = confirmationNumberInput
 export const getLinkedReservationsInput = z.object({
+  refId: z.string(),
   lang: z.nativeEnum(Lang).optional(),
-  rooms: z.array(
-    z.object({
-      confirmationNumber: z.string(),
-    })
-  ),
 })
 
 export const findBookingInput = z.object({
@@ -199,4 +188,15 @@ export const findBookingInput = z.object({
 
 export type LinkedReservationsInput = z.input<typeof getLinkedReservationsInput>
 
-export const getBookingStatusInput = confirmationNumberInput
+export const getBookingStatusInput = z.object({
+  refId: z.string(),
+})
+
+export const getBookingConfirmationErrorInput = z.object({
+  refId: z.string(),
+})
+
+export const getConfirmationCompletedInput = z.object({
+  refId: z.string(),
+  lang: z.nativeEnum(Lang),
+})

apps/scandic-web/server/routers/booking/mutation.ts

@@ -1,19 +1,21 @@
 import * as api from "@/lib/api"
 import { getMembershipNumber } from "@/server/routers/user/utils"
 import { createCounter } from "@/server/telemetry"
+import { getUserOrServiceToken } from "@/server/tokenManager"
 import { router, safeProtectedServiceProcedure } from "@/server/trpc"
 
+import { parseRefId } from "@/utils/refId"
+
 import {
   addPackageInput,
-  cancelBookingInput,
-  cancelManyBookingsInput,
+  cancelBookingsInput,
   createBookingInput,
   guaranteeBookingInput,
   priceChangeInput,
   removePackageInput,
   updateBookingInput,
 } from "./input"
-import { bookingConfirmationSchema, createBookingSchema } from "./output"
+import { bookingSchema, createBookingSchema } from "./output"
 import { cancelBooking } from "./utils"
 
 export const bookingMutationRouter = router({
@@ -74,8 +76,17 @@ export const bookingMutationRouter = router({
     }),
   priceChange: safeProtectedServiceProcedure
     .input(priceChangeInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
+
+      return next({
+        ctx: {
+          confirmationNumber,
+        },
+      })
+    })
     .mutation(async function ({ ctx, input }) {
-      const { confirmationNumber } = input
+      const { confirmationNumber } = ctx
 
       const priceChangeCounter = createCounter("trpc.booking", "price-change")
       const metricsPriceChange = priceChangeCounter.init({ confirmationNumber })
@@ -110,24 +121,29 @@ export const bookingMutationRouter = router({
 
       metricsPriceChange.success()
 
-      return verifiedData.data
+      return verifiedData.data.id
     }),
   cancel: safeProtectedServiceProcedure
-    .input(cancelBookingInput)
+    .input(cancelBookingsInput)
+    .use(async ({ input, next }) => {
+      const confirmationNumbers = input.refIds.map((refId) => {
+        const { confirmationNumber } = parseRefId(refId)
+        return confirmationNumber
+      })
+
+      return next({
+        ctx: {
+          confirmationNumbers,
+        },
+      })
+    })
     .mutation(async function ({ ctx, input }) {
-      const token = ctx.session?.token.access_token ?? ctx.serviceToken
-      const { confirmationNumber, language } = input
-      return await cancelBooking(confirmationNumber, language, token)
-    }),
-  cancelMany: safeProtectedServiceProcedure
-    .input(cancelManyBookingsInput)
-    .mutation(async function ({ ctx, input }) {
-      const token = ctx.session?.token.access_token ?? ctx.serviceToken
-      const { confirmationNumbers, language } = input
+      const { confirmationNumbers } = ctx
+      const { lang } = input
 
       const responses = await Promise.allSettled(
         confirmationNumbers.map((confirmationNumber) =>
-          cancelBooking(confirmationNumber, language, token)
+          cancelBooking(confirmationNumber, lang)
         )
       )
 
@@ -152,10 +168,19 @@ export const bookingMutationRouter = router({
     }),
   packages: safeProtectedServiceProcedure
     .input(addPackageInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
+
+      return next({
+        ctx: {
+          confirmationNumber,
+        },
+      })
+    })
     .mutation(async function ({ ctx, input }) {
       const accessToken = ctx.session?.token.access_token ?? ctx.serviceToken
-      const { confirmationNumber, ...body } = input
-
+      const { refId, ...body } = input
+      const { confirmationNumber } = ctx
       const addPackageCounter = createCounter("trpc.booking", "package.add")
       const metricsAddPackage = addPackageCounter.init({ confirmationNumber })
 
@@ -191,10 +216,19 @@ export const bookingMutationRouter = router({
     }),
   guarantee: safeProtectedServiceProcedure
     .input(guaranteeBookingInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
+
+      return next({
+        ctx: {
+          confirmationNumber,
+        },
+      })
+    })
     .mutation(async function ({ ctx, input }) {
       const accessToken = ctx.session?.token.access_token ?? ctx.serviceToken
-      const { confirmationNumber, language, ...body } = input
-
+      const { refId, language, ...body } = input
+      const { confirmationNumber } = ctx
       const guaranteeBookingCounter = createCounter("trpc.booking", "guarantee")
       const metricsGuaranteeBooking = guaranteeBookingCounter.init({
         confirmationNumber,
@@ -233,10 +267,16 @@ export const bookingMutationRouter = router({
     }),
   update: safeProtectedServiceProcedure
     .input(updateBookingInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
+      return next({
+        ctx: {
+          confirmationNumber,
+        },
+      })
+    })
     .mutation(async function ({ ctx, input }) {
-      const accessToken = ctx.session?.token.access_token || ctx.serviceToken
-      const { confirmationNumber, ...body } = input
-
+      const { confirmationNumber } = ctx
       const updateBookingCounter = createCounter("trpc.booking", "update")
       const metricsUpdateBooking = updateBookingCounter.init({
         confirmationNumber,
@@ -244,12 +284,17 @@ export const bookingMutationRouter = router({
 
       metricsUpdateBooking.start()
 
+      const token = getUserOrServiceToken()
       const apiResponse = await api.put(
         api.endpoints.v1.Booking.booking(confirmationNumber),
         {
-          body,
+          body: {
+            checkInDate: input.checkInDate,
+            checkOutDate: input.checkOutDate,
+            guest: input.guest,
+          },
           headers: {
-            Authorization: `Bearer ${accessToken}`,
+            Authorization: `Bearer ${token}`,
           },
         }
       )
@@ -261,7 +306,7 @@ export const bookingMutationRouter = router({
 
       const apiJson = await apiResponse.json()
 
-      const verifiedData = bookingConfirmationSchema.safeParse(apiJson)
+      const verifiedData = bookingSchema.safeParse(apiJson)
       if (!verifiedData.success) {
         metricsUpdateBooking.validationError(verifiedData.error)
         return null
@@ -269,14 +314,23 @@ export const bookingMutationRouter = router({
 
       metricsUpdateBooking.success()
 
-      return verifiedData.data
+      return verifiedData.data.refId
     }),
   removePackage: safeProtectedServiceProcedure
     .input(removePackageInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
+
+      return next({
+        ctx: {
+          confirmationNumber,
+        },
+      })
+    })
     .mutation(async function ({ ctx, input }) {
       const accessToken = ctx.session?.token.access_token ?? ctx.serviceToken
-      const { confirmationNumber, codes, language } = input
-
+      const { codes, language } = input
+      const { confirmationNumber } = ctx
       const removePackageCounter = createCounter(
         "trpc.booking",
         "package.remove"
@@ -297,7 +351,7 @@ export const bookingMutationRouter = router({
         api.endpoints.v1.Booking.packages(confirmationNumber),
         {
           headers,
-        } as RequestInit,
+        },
         [["language", language], ...codes.map((code) => ["codes", code])]
       )
 

apps/scandic-web/server/routers/booking/output.ts

@@ -2,6 +2,7 @@ import { z } from "zod"
 
 import { BookingStatusEnum, ChildBedTypeEnum } from "@/constants/booking"
 
+import { calculateRefId } from "@/utils/refId"
 import { nullableArrayObjectValidator } from "@/utils/zod/arrayValidator"
 import { nullableIntValidator } from "@/utils/zod/numberValidator"
 import {
@@ -78,7 +79,13 @@ export const createBookingSchema = z
     type: d.data.type,
     reservationStatus: d.data.attributes.reservationStatus,
     paymentUrl: d.data.attributes.paymentUrl,
-    rooms: d.data.attributes.rooms,
+    rooms: d.data.attributes.rooms.map((room) => {
+      const lastName = d.data.attributes.guest?.lastName || ""
+      return {
+        ...room,
+        refId: calculateRefId(room.confirmationNumber, lastName),
+      }
+    }),
     errors: d.data.attributes.errors,
     guest: d.data.attributes.guest,
   }))
@@ -195,7 +202,7 @@ const linksSchema = z.object({
     .nullable(),
 })
 
-export const bookingConfirmationSchema = z
+export const bookingSchema = z
   .object({
     data: z.object({
       attributes: z.object({
@@ -248,6 +255,19 @@ export const bookingConfirmationSchema = z
   })
   .transform(({ data }) => ({
     ...data.attributes,
+    refId: calculateRefId(
+      data.attributes.confirmationNumber,
+      data.attributes.guest.lastName
+    ),
+    linkedReservations: data.attributes.linkedReservations.map(
+      (linkedReservation) => {
+        const lastName = data.attributes.guest.lastName
+        return {
+          ...linkedReservation,
+          refId: calculateRefId(linkedReservation.confirmationNumber, lastName),
+        }
+      }
+    ),
     packages: data.attributes.packages.filter((p) => p.type !== "Ancillary"),
     ancillaries: data.attributes.packages.filter((p) => p.type === "Ancillary"),
     extraBedTypes: data.attributes.childBedPreferences,

apps/scandic-web/server/routers/booking/query.ts

@@ -1,3 +1,5 @@
+import { BookingStatusEnum } from "@/constants/booking"
+import { bookingConfirmation } from "@/constants/routes/hotelReservation"
 import * as api from "@/lib/api"
 import { badRequestError, serverErrorByStatus } from "@/server/errors/trpc"
 import { createCounter } from "@/server/telemetry"
@@ -6,39 +8,47 @@ import {
   safeProtectedServiceProcedure,
   serviceProcedure,
 } from "@/server/trpc"
+import { getBookedHotelRoom } from "@/stores/my-stay"
+
+import { calculateRefId, parseRefId } from "@/utils/refId"
 
 import { getHotel } from "../hotels/utils"
-import { encrypt } from "../utils/encryption"
 import {
+  bookingConfirmationInput,
   createRefIdInput,
   findBookingInput,
-  getBookingInput,
+  getBookingConfirmationErrorInput,
   getBookingStatusInput,
+  getConfirmationCompletedInput,
   getLinkedReservationsInput,
 } from "./input"
 import { createBookingSchema } from "./output"
-import { findBooking, getBookedHotelRoom, getBooking } from "./utils"
+import { findBooking, getBooking, getLinkedReservations } from "./utils"
+
+import type { BookingSchema } from "@/types/trpc/routers/booking/confirmation"
 
 export const bookingQueryRouter = router({
-  get: safeProtectedServiceProcedure
-    .input(getBookingInput)
+  confirmation: safeProtectedServiceProcedure
+    .input(bookingConfirmationInput)
     .use(async ({ ctx, input, next }) => {
       const lang = input.lang ?? ctx.lang
-      const token = ctx.session?.token.access_token ?? ctx.serviceToken
+      const { confirmationNumber } = parseRefId(input.refId)
       return next({
         ctx: {
           lang,
-          token,
+          confirmationNumber,
         },
       })
     })
-    .query(async function ({ ctx, input: { confirmationNumber } }) {
+    .query(async function ({
+      ctx: { confirmationNumber, lang, serviceToken },
+    }) {
       const getBookingCounter = createCounter("trpc.booking", "get")
       const metricsGetBooking = getBookingCounter.init({ confirmationNumber })
 
       metricsGetBooking.start()
 
-      const booking = await getBooking(confirmationNumber, ctx.lang, ctx.token)
+      const booking = await getBooking(confirmationNumber, lang)
 
       if (!booking) {
         metricsGetBooking.dataError(
@@ -52,9 +62,9 @@ export const bookingQueryRouter = router({
         {
           hotelId: booking.hotelId,
           isCardOnlyPayment: false,
-          language: ctx.lang,
+          language: lang,
         },
-        ctx.serviceToken
+        serviceToken
       )
 
       if (!hotelData) {
@@ -68,15 +78,29 @@ export const bookingQueryRouter = router({
         throw serverErrorByStatus(404)
       }
 
+      const room = getBookedHotelRoom(
+        hotelData.roomCategories,
+        booking.roomTypeCode
+      )
+
+      if (!room) {
+        metricsGetBooking.dataError(
+          `Failed to extract booked room ${booking.roomTypeCode} from room categories for ${booking.hotelId}`,
+          {
+            roomTypeCode: booking.roomTypeCode,
+            hotelId: booking.hotelId,
+          }
+        )
+
+        throw serverErrorByStatus(404)
+      }
+
       metricsGetBooking.success()
 
       return {
-        ...hotelData,
+        hotelData,
         booking,
-        room: getBookedHotelRoom(
-          hotelData.roomCategories,
-          booking.roomTypeCode
-        ),
+        room,
       }
     }),
   findBooking: safeProtectedServiceProcedure
@@ -128,109 +152,248 @@ export const bookingQueryRouter = router({
         throw serverErrorByStatus(404)
       }
 
+      const room = getBookedHotelRoom(
+        hotelData.roomCategories,
+        booking.roomTypeCode
+      )
+
+      if (!room) {
+        metricsFindBooking.dataError(
+          `Failed to extract booked room ${booking.roomTypeCode} from room categories for ${booking.hotelId}`,
+          {
+            roomTypeCode: booking.roomTypeCode,
+            hotelId: booking.hotelId,
+          }
+        )
+
+        throw serverErrorByStatus(404)
+      }
+
       metricsFindBooking.success()
 
       return {
-        ...hotelData,
+        hotelData,
         booking,
-        room: getBookedHotelRoom(
-          hotelData.roomCategories,
-          booking.roomTypeCode
-        ),
+        room,
       }
     }),
   linkedReservations: safeProtectedServiceProcedure
     .input(getLinkedReservationsInput)
     .use(async ({ ctx, input, next }) => {
       const lang = input.lang ?? ctx.lang
-      const token = ctx.session?.token.access_token ?? ctx.serviceToken
+      const { confirmationNumber } = parseRefId(input.refId)
+
       return next({
         ctx: {
           lang,
-          token,
+          confirmationNumber,
         },
       })
     })
-    .query(async function ({ ctx, input: { rooms } }) {
-      const getLinkedReservationsCounter = createCounter(
+    .query(async function ({ ctx: { confirmationNumber, lang } }) {
+      const linkedReservationsCounter = createCounter(
         "trpc.booking",
         "linkedReservations"
       )
-      const metricsGetLinkedReservations = getLinkedReservationsCounter.init({
-        confirmationNumbers: rooms,
+      const metricsLinkedReservations = linkedReservationsCounter.init({
+        confirmationNumber,
       })
 
-      metricsGetLinkedReservations.start()
+      metricsLinkedReservations.start()
 
-      const linkedReservationsResult = await Promise.allSettled(
-        rooms.map((room) =>
-          getBooking(room.confirmationNumber, ctx.lang, ctx.token)
-        )
+      const linkedReservations = await getLinkedReservations(
+        confirmationNumber,
+        lang
       )
-      const linkedReservations = []
-      for (const booking of linkedReservationsResult) {
-        if (booking.status === "fulfilled") {
-          if (booking.value) {
-            linkedReservations.push(booking.value)
-          } else {
-            metricsGetLinkedReservations.dataError(
-              `Unexpected value for linked reservation`
-            )
-          }
-        } else {
-          metricsGetLinkedReservations.dataError(
-            `Failed to get linked reservation`
+
+      if (!linkedReservations) {
+        metricsLinkedReservations.noDataError()
+        return null
+      }
+
+      const validLinkedReservations = linkedReservations.reduce<
+        BookingSchema[]
+      >((acc, linkedReservation) => {
+        if ("error" in linkedReservation) {
+          metricsLinkedReservations.dataError(
+            `Failed to get linked reservations ${linkedReservation.confirmationNumber}`,
+            {
+              linkedReservationConfirmationNumber:
+                linkedReservation.confirmationNumber,
+            }
           )
+          return acc
         }
-      }
 
-      metricsGetLinkedReservations.success()
+        acc.push(linkedReservation)
+        return acc
+      }, [])
 
-      return linkedReservations
+      metricsLinkedReservations.success()
+
+      return validLinkedReservations
     }),
-  status: serviceProcedure.input(getBookingStatusInput).query(async function ({
-    ctx,
-    input,
-  }) {
-    const { confirmationNumber } = input
+  status: serviceProcedure
+    .input(getBookingStatusInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
 
-    const getBookingStatusCounter = createCounter("trpc.booking", "status")
-    const metricsGetBookingStatus = getBookingStatusCounter.init({
-      confirmationNumber,
-    })
-
-    metricsGetBookingStatus.start()
-
-    const apiResponse = await api.get(
-      api.endpoints.v1.Booking.status(confirmationNumber),
-      {
-        headers: {
-          Authorization: `Bearer ${ctx.serviceToken}`,
+      return next({
+        ctx: {
+          confirmationNumber,
         },
+      })
+    })
+    .query(async function ({ ctx: { confirmationNumber, serviceToken } }) {
+      const getBookingStatusCounter = createCounter("trpc.booking", "status")
+      const metricsGetBookingStatus = getBookingStatusCounter.init({
+        confirmationNumber,
+      })
+
+      metricsGetBookingStatus.start()
+
+      const apiResponse = await api.get(
+        api.endpoints.v1.Booking.status(confirmationNumber),
+        {
+          headers: {
+            Authorization: `Bearer ${serviceToken}`,
+          },
+        }
+      )
+
+      if (!apiResponse.ok) {
+        await metricsGetBookingStatus.httpError(apiResponse)
+        throw serverErrorByStatus(apiResponse.status, apiResponse)
       }
-    )
 
-    if (!apiResponse.ok) {
-      await metricsGetBookingStatus.httpError(apiResponse)
-      throw serverErrorByStatus(apiResponse.status, apiResponse)
-    }
+      const apiJson = await apiResponse.json()
+      const verifiedData = createBookingSchema.safeParse(apiJson)
+      if (!verifiedData.success) {
+        metricsGetBookingStatus.validationError(verifiedData.error)
+        throw badRequestError()
+      }
 
-    const apiJson = await apiResponse.json()
-    const verifiedData = createBookingSchema.safeParse(apiJson)
-    if (!verifiedData.success) {
-      metricsGetBookingStatus.validationError(verifiedData.error)
-      throw badRequestError()
-    }
+      metricsGetBookingStatus.success()
 
-    metricsGetBookingStatus.success()
+      return verifiedData.data
+    }),
+
+  confirmationCompleted: serviceProcedure
+    .input(getConfirmationCompletedInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
+
+      return next({
+        ctx: {
+          confirmationNumber,
+        },
+      })
+    })
+    .query(async function ({ ctx, input }) {
+      const { confirmationNumber } = ctx
+
+      const confirmationCompletedCounter = createCounter(
+        "trpc.booking",
+        "confirmationCompleted"
+      )
+      const metricsConfirmationCompleted = confirmationCompletedCounter.init({
+        confirmationNumber,
+      })
+
+      metricsConfirmationCompleted.start()
+
+      const apiResponse = await api.get(
+        api.endpoints.v1.Booking.status(confirmationNumber),
+        {
+          headers: {
+            Authorization: `Bearer ${ctx.serviceToken}`,
+          },
+        }
+      )
+
+      if (!apiResponse.ok) {
+        await metricsConfirmationCompleted.httpError(apiResponse)
+        throw serverErrorByStatus(apiResponse.status, apiResponse)
+      }
+
+      const apiJson = await apiResponse.json()
+      const verifiedData = createBookingSchema.safeParse(apiJson)
+      if (!verifiedData.success) {
+        metricsConfirmationCompleted.validationError(verifiedData.error)
+        throw badRequestError()
+      }
+
+      const confirmationUrl =
+        verifiedData.data.reservationStatus ===
+        BookingStatusEnum.BookingCompleted
+          ? `${bookingConfirmation(input.lang)}?RefId=${verifiedData.data.rooms[0].refId}`
+          : ""
+
+      const result = {
+        ...verifiedData.data,
+        redirectUrl: verifiedData.data.paymentUrl || confirmationUrl,
+      }
+
+      metricsConfirmationCompleted.success()
+
+      return result
+    }),
+
+  confirmationError: serviceProcedure
+    .input(getBookingConfirmationErrorInput)
+    .use(async ({ input, next }) => {
+      const { confirmationNumber } = parseRefId(input.refId)
+
+      return next({
+        ctx: {
+          confirmationNumber,
+        },
+      })
+    })
+    .query(async function ({ ctx }) {
+      const { confirmationNumber } = ctx
+
+      const confirmationErrorCounter = createCounter(
+        "trpc.booking",
+        "confirmationError"
+      )
+      const metricsConfirmationError = confirmationErrorCounter.init({
+        confirmationNumber,
+      })
+
+      metricsConfirmationError.start()
+
+      const apiResponse = await api.get(
+        api.endpoints.v1.Booking.status(confirmationNumber),
+        {
+          headers: {
+            Authorization: `Bearer ${ctx.serviceToken}`,
+          },
+        }
+      )
+
+      if (!apiResponse.ok) {
+        await metricsConfirmationError.httpError(apiResponse)
+        throw serverErrorByStatus(apiResponse.status, apiResponse)
+      }
+
+      const apiJson = await apiResponse.json()
+      const verifiedData = createBookingSchema.safeParse(apiJson)
+      if (!verifiedData.success) {
+        metricsConfirmationError.validationError(verifiedData.error)
+        throw badRequestError()
+      }
+
+      metricsConfirmationError.success()
+
+      return verifiedData.data
+    }),
 
-    return verifiedData.data
-  }),
   createRefId: serviceProcedure
     .input(createRefIdInput)
     .mutation(async function ({ input }) {
       const { confirmationNumber, lastName } = input
-      const encryptedRefId = encrypt(`${confirmationNumber},${lastName}`)
+      const encryptedRefId = calculateRefId(confirmationNumber, lastName)
 
       if (!encryptedRefId) {
         throw serverErrorByStatus(422, "Was not able to encrypt ref id")

apps/scandic-web/server/routers/booking/utils.ts

@@ -1,81 +1,163 @@
 import * as api from "@/lib/api"
 import { badRequestError, serverErrorByStatus } from "@/server/errors/trpc"
 import { createCounter } from "@/server/telemetry"
+import { getUserOrServiceToken } from "@/server/tokenManager"
 import { toApiLang } from "@/server/utils"
 
-import { bookingConfirmationSchema, createBookingSchema } from "./output"
+import { getCacheClient } from "@/services/dataCache"
 
-import type { Room } from "@/types/hotel"
-import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+import { bookingSchema, createBookingSchema } from "./output"
+
+import type { BookingSchema } from "@/types/trpc/routers/booking/confirmation"
 import type { Lang } from "@/constants/languages"
 
-export function getBookedHotelRoom(
-  rooms: Room[] | undefined,
-  roomTypeCode: BookingConfirmation["booking"]["roomTypeCode"]
-) {
-  if (!rooms?.length || !roomTypeCode) {
-    return null
-  }
-  const room = rooms?.find((r) => {
-    return r.roomTypes.find((roomType) => roomType.code === roomTypeCode)
-  })
-  if (!room) {
-    return null
-  }
-  const bedType = room.roomTypes.find(
-    (roomType) => roomType.code === roomTypeCode
-  )
-  if (!bedType) {
-    return null
-  }
-  return {
-    ...room,
-    bedType,
-  }
-}
-
-export async function getBooking(
-  confirmationNumber: string,
-  lang: Lang,
-  token: string
-) {
+export async function getBooking(confirmationNumber: string, lang: Lang) {
   const getBookingCounter = createCounter("booking", "get")
   const metricsGetBooking = getBookingCounter.init({ confirmationNumber })
 
   metricsGetBooking.start()
 
-  const apiResponse = await api.get(
-    api.endpoints.v1.Booking.booking(confirmationNumber),
+  const cacheKey = `${lang}:booking:${confirmationNumber}`
+  const cache = await getCacheClient()
+
+  const result: BookingSchema | null = await cache.cacheOrGet(
+    cacheKey,
+    async () => {
+      const token = getUserOrServiceToken()
+
+      const apiResponse = await api.get(
+        api.endpoints.v1.Booking.booking(confirmationNumber),
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+        { language: toApiLang(lang) }
+      )
+
+      if (!apiResponse.ok) {
+        await metricsGetBooking.httpError(apiResponse)
+
+        // If the booking is not found, return null.
+        // This scenario is expected to happen when a logged in user trying to access a booking that doesn't belong to them.
+        if (apiResponse.status === 400) {
+          return null
+        }
+
+        throw serverErrorByStatus(apiResponse.status, apiResponse)
+      }
+
+      const apiJson = await apiResponse.json()
+      const booking = bookingSchema.safeParse(apiJson)
+      if (!booking.success) {
+        metricsGetBooking.validationError(booking.error)
+        throw badRequestError()
+      }
+
+      return booking.data
+    },
+    "1h"
+  )
+
+  metricsGetBooking.success()
+
+  return result
+}
+
+export async function getBookings(confirmationNumbers: string[], lang: Lang) {
+  const results = await Promise.allSettled(
+    confirmationNumbers.map((confirmationNumber) => {
+      return getBooking(confirmationNumber, lang)
+    })
+  )
+
+  return results.map((result) => {
+    if (result.status === "fulfilled" && result.value) {
+      return result.value
+    }
+    return null
+  })
+}
+
+export async function getLinkedReservations(
+  confirmationNumber: string,
+  lang: Lang
+) {
+  const booking = await getBooking(confirmationNumber, lang)
+
+  if (!booking) {
+    return null
+  }
+
+  if (booking.linkedReservations.length > 0) {
+    const confirmationNumbers = booking.linkedReservations.map(
+      (linkedReservation) => {
+        return linkedReservation.confirmationNumber
+      }
+    )
+
+    const bookings = await getBookings(confirmationNumbers, lang)
+
+    const linkedReservations = bookings.map((booking, i) => {
+      if (booking === null) {
+        return {
+          confirmationNumber: confirmationNumbers[i],
+          error: true,
+        } as const
+      }
+      return booking
+    })
+
+    return linkedReservations
+  }
+
+  return []
+}
+
+export async function cancelBooking(confirmationNumber: string, lang: Lang) {
+  const cancelBookingCounter = createCounter("booking", "cancel")
+  const metricsCancelBooking = cancelBookingCounter.init({
+    confirmationNumber,
+    lang,
+  })
+
+  metricsCancelBooking.start()
+
+  const token = getUserOrServiceToken()
+  const headers = {
+    Authorization: `Bearer ${token}`,
+  }
+
+  const booking = await getBooking(confirmationNumber, lang)
+  if (!booking) {
+    metricsCancelBooking.noDataError({ confirmationNumber })
+    return null
+  }
+  const { firstName, lastName, email } = booking.guest
+  const apiResponse = await api.remove(
+    api.endpoints.v1.Booking.cancel(confirmationNumber),
     {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
+      headers,
+      body: { firstName, lastName, email },
     },
     { language: toApiLang(lang) }
   )
 
   if (!apiResponse.ok) {
-    await metricsGetBooking.httpError(apiResponse)
-
-    // If the booking is not found, return null.
-    // This scenario is expected to happen when a logged in user trying to access a booking that doesn't belong to them.
-    if (apiResponse.status === 400) {
-      return null
-    }
-
-    throw serverErrorByStatus(apiResponse.status, apiResponse)
+    await metricsCancelBooking.httpError(apiResponse)
+    return null
   }
 
   const apiJson = await apiResponse.json()
-  const booking = bookingConfirmationSchema.safeParse(apiJson)
-  if (!booking.success) {
-    metricsGetBooking.validationError(booking.error)
-    throw badRequestError()
+  const verifiedData = createBookingSchema.safeParse(apiJson)
+  if (!verifiedData.success) {
+    metricsCancelBooking.validationError(verifiedData.error)
+    return null
   }
 
-  metricsGetBooking.success()
+  metricsCancelBooking.success()
 
-  return booking.data
+  return verifiedData.data
 }
 
 export async function findBooking(
@@ -124,7 +206,7 @@ export async function findBooking(
   }
 
   const apiJson = await apiResponse.json()
-  const booking = bookingConfirmationSchema.safeParse(apiJson)
+  const booking = bookingSchema.safeParse(apiJson)
   if (!booking.success) {
     metricsGetBooking.validationError(booking.error)
     throw badRequestError()
@@ -134,52 +216,3 @@ export async function findBooking(
 
   return booking.data
 }
-
-export async function cancelBooking(
-  confirmationNumber: string,
-  language: string,
-  token: string
-) {
-  const cancellationReason = {
-    reasonCode: "WEB-CANCEL",
-    reason: "WEB-CANCEL",
-  }
-
-  const cancelBookingCounter = createCounter("booking", "cancel")
-  const metricsCancelBooking = cancelBookingCounter.init({
-    cancellationReason,
-    confirmationNumber,
-    language,
-  })
-
-  metricsCancelBooking.start()
-
-  const headers = {
-    Authorization: `Bearer ${token}`,
-  }
-
-  const apiResponse = await api.remove(
-    api.endpoints.v1.Booking.cancel(confirmationNumber),
-    {
-      headers,
-      body: JSON.stringify(cancellationReason),
-    } as RequestInit,
-    { language }
-  )
-
-  if (!apiResponse.ok) {
-    await metricsCancelBooking.httpError(apiResponse)
-    return false
-  }
-
-  const apiJson = await apiResponse.json()
-  const verifiedData = createBookingSchema.safeParse(apiJson)
-  if (!verifiedData.success) {
-    metricsCancelBooking.validationError(verifiedData.error)
-    return null
-  }
-
-  metricsCancelBooking.success()
-
-  return verifiedData.data
-}

apps/scandic-web/server/routers/user/utils.ts

@@ -4,10 +4,10 @@ import { myStay } from "@/constants/routes/myStay"
 import { env } from "@/env/server"
 import * as api from "@/lib/api"
 import { dt } from "@/lib/dt"
-import { encrypt } from "@/server/routers/utils/encryption"
 import { createCounter } from "@/server/telemetry"
 
 import { cache } from "@/utils/cache"
+import { encrypt } from "@/utils/encryption"
 import * as maskValue from "@/utils/maskValue"
 import { isValidSession } from "@/utils/session"
 import { getCurrentWebUrl } from "@/utils/url"

apps/scandic-web/server/tokenManager.ts

@@ -3,7 +3,9 @@ import { trace, type Tracer } from "@opentelemetry/api"
 import { env } from "@/env/server"
 import { createCounter } from "@/server/telemetry"
 
+import { auth } from "@/auth"
 import { getCacheClient } from "@/services/dataCache"
+import { isValidSession } from "@/utils/session"
 
 import type { ServiceTokenResponse } from "@/types/tokens"
 
@@ -117,3 +119,12 @@ async function fetchServiceToken(scopes: string[]) {
 function getServiceTokenCacheKey(scopes: string[]): string {
   return `serviceToken:${scopes.join(",")}`
 }
+
+export async function getUserOrServiceToken() {
+  const serviceToken = await getServiceToken()
+  const session = await auth()
+
+  return isValidSession(session)
+    ? session.token.access_token
+    : serviceToken.access_token
+}

apps/scandic-web/stores/my-stay/index.ts

@@ -3,8 +3,6 @@ import { produce } from "immer"
 import { useContext } from "react"
 import { create, useStore } from "zustand"
 
-import { getBookedHotelRoom } from "@/server/routers/booking/utils"
-
 import { mapRoomDetails } from "@/components/HotelReservation/MyStay/utils/mapRoomDetails"
 import { MyStayContext } from "@/contexts/MyStay"
 
@@ -14,7 +12,34 @@ import {
   isAllRoomsCancelled,
 } from "./helpers"
 
+import type { Room } from "@/types/hotel"
 import type { InitialState, MyStayState } from "@/types/stores/my-stay"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export function getBookedHotelRoom(
+  rooms: Room[] | undefined,
+  roomTypeCode: BookingConfirmation["booking"]["roomTypeCode"]
+) {
+  if (!rooms?.length || !roomTypeCode) {
+    return null
+  }
+  const room = rooms?.find((r) => {
+    return r.roomTypes.find((roomType) => roomType.code === roomTypeCode)
+  })
+  if (!room) {
+    return null
+  }
+  const bedType = room.roomTypes.find(
+    (roomType) => roomType.code === roomTypeCode
+  )
+  if (!bedType) {
+    return null
+  }
+  return {
+    ...room,
+    bedType,
+  }
+}
 
 export function createMyStayStore({
   breakfastPackages,

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar.ts

@@ -1,12 +1,8 @@
 import type { EventAttributes } from "ics"
 
-import type { RouterOutput } from "@/lib/trpc/client"
-
 export interface AddToCalendarProps {
-  checkInDate: NonNullable<
-    RouterOutput["booking"]["get"]
-  >["booking"]["checkInDate"]
+  checkInDate: Date
   event: EventAttributes
-  hotelName: NonNullable<RouterOutput["booking"]["get"]>["hotel"]["name"]
+  hotelName: string
   renderButton: (onPress: () => Promise<void>) => React.ReactNode
 }

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts

@@ -1,3 +1,3 @@
 export interface ManageBookingProps {
-  bookingUrl: string
+  refId: string
 }

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts

@@ -1,23 +1,19 @@
 import type { Room } from "@/types/hotel"
 import type {
   BookingConfirmation,
-  BookingConfirmationSchema,
+  BookingSchema,
 } from "@/types/trpc/routers/booking/confirmation"
 
-export interface BookingConfirmationProps {
-  confirmationNumber: string
-}
-
 export interface BookingConfirmationRoom extends Room {
   bedType: Room["roomTypes"][number]
 }
 
 export interface ConfirmationProps
-  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+  extends Pick<BookingConfirmation, "booking" | "hotelData"> {
   room: BookingConfirmationRoom
   refId: string
 }
 
 export interface BookingConfirmationAlertsProps {
-  booking: BookingConfirmationSchema
+  booking: BookingSchema
 }

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/header.ts

@@ -1,9 +1,7 @@
-import type { MutableRefObject } from "react"
-
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 
-export interface BookingConfirmationHeaderProps
-  extends Pick<BookingConfirmation, "booking" | "hotel"> {
-  mainRef: MutableRefObject<HTMLElement | null>
+export interface BookingConfirmationHeaderProps {
+  booking: BookingConfirmation["booking"]
+  hotel: BookingConfirmation["hotelData"]["hotel"]
   refId: string
 }

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/hotelDetails.ts

@@ -1,5 +1,5 @@
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 
 export interface BookingConfirmationHotelDetailsProps {
-  hotel: BookingConfirmation["hotel"]
+  hotel: BookingConfirmation["hotelData"]["hotel"]
 }

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/promos.ts

@@ -1,8 +1,4 @@
-import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
-
-export interface PromosProps
-  extends Pick<
-      BookingConfirmation["booking"],
-      "confirmationNumber" | "hotelId"
-    >,
-    Pick<BookingConfirmation["booking"]["guest"], "lastName"> {}
+export interface PromosProps {
+  hotelId: string
+  refId: string
+}

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms.ts

@@ -1,11 +1,5 @@
-import type { z } from "zod"
-
 import type { Room } from "@/types/hotel"
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
-import type { linkedReservationSchema } from "@/server/routers/booking/output"
-
-export interface LinkedReservationSchema
-  extends z.output<typeof linkedReservationSchema> {}
 
 export interface BookingConfirmationRoomsProps
   extends Pick<BookingConfirmation, "booking"> {
@@ -14,5 +8,4 @@ export interface BookingConfirmationRoomsProps
   }
   checkInTime: string
   checkOutTime: string
-  linkedReservations: LinkedReservationSchema[]
 }

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts

@@ -1,7 +1,7 @@
 export interface LinkedReservationProps {
   checkInTime: string
   checkOutTime: string
-  confirmationNumber: string
+  refId: string
   roomIndex: number
 }
 

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts

@@ -1,9 +1,14 @@
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 
 export interface RoomProps {
-  booking: BookingConfirmation["booking"]
+  checkInDate: BookingConfirmation["booking"]["checkInDate"]
+  checkOutDate: BookingConfirmation["booking"]["checkOutDate"]
   checkInTime: string
   checkOutTime: string
+  confirmationNumber: string
+  guest: BookingConfirmation["booking"]["guest"]
+  guaranteeInfo: BookingConfirmation["booking"]["guaranteeInfo"]
   img: NonNullable<BookingConfirmation["room"]>["images"][number]
+  rateDefinition: BookingConfirmation["booking"]["rateDefinition"]
   roomName: NonNullable<BookingConfirmation["room"]>["name"]
 }

apps/scandic-web/types/components/hotelReservation/enterDetails/payment.ts

@@ -17,3 +17,7 @@ export type PriceChangeData = Array<{
   totalPrice: number
   packagePrice?: number
 } | null>
+
+export interface TermsAndConditionsProps {
+  isFlexBookingTerms: boolean
+}

apps/scandic-web/types/components/myPages/myStay/ancillaries.ts

@@ -23,6 +23,7 @@ export interface AncillariesProps extends Pick<BookingConfirmation, "booking"> {
 export interface AddedAncillariesProps {
   ancillaries: Ancillary["ancillaryContent"][number][] | null
   booking: BookingConfirmation["booking"]
+  refId: string
 }
 
 export interface AncillaryProps {

apps/scandic-web/types/stores/my-stay.ts

@@ -30,6 +30,7 @@ export type Room = Pick<
   | "linkedReservations"
   | "multiRoom"
   | "rateDefinition"
+  | "refId"
   | "reservationStatus"
   | "roomPoints"
   | "roomTypeCode"

apps/scandic-web/types/trpc/routers/booking/confirmation.ts

@@ -2,20 +2,20 @@ import type { z } from "zod"
 
 import type { HotelData, Room } from "@/types/hotel"
 import type {
-  bookingConfirmationSchema,
+  bookingSchema,
   packageSchema,
 } from "@/server/routers/booking/output"
 
-export interface BookingConfirmationSchema
-  extends z.output<typeof bookingConfirmationSchema> {}
+export interface BookingSchema extends z.output<typeof bookingSchema> {}
 
 export interface PackageSchema extends z.output<typeof packageSchema> {}
 
-export interface BookingConfirmation extends HotelData {
-  booking: BookingConfirmationSchema
-  room:
-    | (Room & {
-        bedType: Room["roomTypes"][number]
-      })
-    | null
+export interface BookingConfirmationRoom extends Room {
+  bedType: Room["roomTypes"][number]
+}
+
+export interface BookingConfirmation {
+  booking: BookingSchema
+  hotelData: HotelData
+  room: BookingConfirmationRoom
 }

apps/scandic-web/utils/refId.ts

@@ -0,0 +1,21 @@
+import "server-only"
+
+import { decrypt, encrypt } from "./encryption"
+
+export function calculateRefId(confirmationNumber: string, lastName: string) {
+  const encryptedRefId = encrypt(`${confirmationNumber},${lastName}`)
+
+  return encryptedRefId
+}
+
+export function parseRefId(refId: string) {
+  const data = decrypt(refId)
+  const parts = data.split(",")
+  if (parts.length !== 2) {
+    throw new Error("Invalid refId format")
+  }
+  return {
+    confirmationNumber: parts[0],
+    lastName: parts[1],
+  }
+}