Merge master

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

@@ -0,0 +1,44 @@
+.main {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  display: grid;
+  gap: var(--Spacing-x5);
+  grid-template-areas: "header" "booking";
+  margin: 0 auto;
+  min-height: 100dvh;
+  padding-top: var(--Spacing-x5);
+  width: var(--max-width-page);
+}
+
+@media screen and (min-width: 1367px) {
+  .main {
+    grid-template-areas:
+      "header  receipt"
+      "booking receipt";
+    grid-template-columns: 1fr 340px;
+    grid-template-rows: auto 1fr;
+    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.module.css

@@ -0,0 +1,45 @@
+.main {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  display: flex;
+  padding: var(--Spacing-x5) var(--Spacing-x4);
+  flex-direction: column;
+  gap: var(--Spacing-x5);
+}
+
+.addresses {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--Spacing-x2);
+}
+
+.rightColumn {
+  text-align: right;
+}
+
+.addressMargin {
+  margin-top: var(--Spacing-x-half);
+}
+
+.tertiary {
+  color: var(--Text-Tertiary);
+}
+
+.divider {
+  color: var(--Border-Divider-Accent);
+}
+
+.form {
+  max-width: 640px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--Spacing-x5) 0;
+}
+
+.logIn {
+  padding: var(--Spacing-x9) var(--Spacing-x2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  align-items: center;
+  color: var(--Scandic-Grey-100);
+}

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>
   )