Merged master into fix/header-skeletons

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

@@ -1,20 +1,8 @@
-import { Suspense } from "react"
-
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
-import Header from "@/components/HotelReservation/BookingConfirmation/Header"
+import BookingConfirmation from "@/components/HotelReservation/BookingConfirmation"
-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 LoadingSpinner from "@/components/LoadingSpinner"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { setLang } from "@/i18n/serverContext"
 
-import styles from "./page.module.css"
-
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function BookingConfirmationPage({
@@ -22,29 +10,12 @@ export default async function BookingConfirmationPage({
   searchParams,
 }: PageArgs<LangParams, { confirmationNumber: string }>) {
   setLang(params.lang)
-  void getBookingConfirmation(searchParams.confirmationNumber)
+  const bookingConfirmationPromise = getBookingConfirmation(
+    searchParams.confirmationNumber
+  )
   return (
-    <main className={styles.main}>
+    <BookingConfirmation
-      <Suspense fallback={<LoadingSpinner fullPage />}>
+      bookingConfirmationPromise={bookingConfirmationPromise}
-        <Header confirmationNumber={searchParams.confirmationNumber} />
+    />
-        <div className={styles.booking}>
-          <Rooms confirmationNumber={searchParams.confirmationNumber} />
-          <PaymentDetails
-            confirmationNumber={searchParams.confirmationNumber}
-          />
-          <Divider color="primaryLightSubtle" />
-          <HotelDetails confirmationNumber={searchParams.confirmationNumber} />
-          <Promos />
-          <div className={styles.mobileReceipt}>
-            <Receipt confirmationNumber={searchParams.confirmationNumber} />
-          </div>
-        </div>
-        <aside className={styles.aside}>
-          <SidePanel variant="receipt">
-            <Receipt confirmationNumber={searchParams.confirmationNumber} />
-          </SidePanel>
-        </aside>
-      </Suspense>
-    </main>
   )
 }

components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx

@@ -0,0 +1,80 @@
+import { meetingsAndConferences } from "@/constants/routes/hotelPageParams"
+
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./meetingsAndConferences.module.css"
+
+import type { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences"
+
+export default async function MeetingsAndConferencesSidePeek({
+  meetingFacilities,
+  descriptions,
+  link,
+}: MeetingsAndConferencesSidePeekProps) {
+  const lang = getLang()
+  const intl = await getIntl()
+  const fallbackAlt = intl.formatMessage({ id: "Creative spaces for meetings" })
+
+  const primaryImage = meetingFacilities?.heroImages[0]?.imageSizes.medium
+  const primaryAltText =
+    meetingFacilities?.heroImages[0]?.metaData.altText || fallbackAlt
+
+  const secondaryImage = meetingFacilities?.heroImages[1]?.imageSizes.medium
+  const secondaryAltText =
+    meetingFacilities?.heroImages[1]?.metaData.altText || fallbackAlt
+
+  return (
+    <SidePeek
+      contentKey={meetingsAndConferences[lang]}
+      title={intl.formatMessage({ id: "Meetings & Conferences" })}
+    >
+      <div className={styles.wrapper}>
+        <Subtitle color="burgundy" asChild>
+          <Title level="h3">
+            {intl.formatMessage({ id: "Creative spaces for meetings" })}
+          </Title>
+        </Subtitle>
+        {primaryImage && (
+          <div className={secondaryImage ? styles.imageContainer : ""}>
+            <Image
+              src={primaryImage}
+              alt={primaryAltText}
+              height={300}
+              width={200}
+              className={styles.image}
+            />
+            {secondaryImage && (
+              <Image
+                src={secondaryImage}
+                alt={secondaryAltText}
+                height={300}
+                width={200}
+                className={`${styles.image} ${styles.secondaryImage}`}
+              />
+            )}
+          </div>
+        )}
+        {descriptions?.medium && (
+          <Body color="uiTextHighContrast">{descriptions.medium}</Body>
+        )}
+        {link && (
+          <div className={styles.buttonContainer}>
+            <Button fullWidth theme="base" intent="secondary" asChild>
+              <Link href={link} weight="bold" color="burgundy">
+                {intl.formatMessage({ id: "About meetings & conferences" })}
+              </Link>
+            </Button>
+          </div>
+        )}
+      </div>
+    </SidePeek>
+  )
+}

components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css

@@ -0,0 +1,44 @@
+.wrapper {
+  display: grid;
+  gap: var(--Spacing-x3);
+  margin-bottom: calc(
+    var(--Spacing-x4) * 2 + 80px
+  ); /* Creates space between the wrapper and buttonContainer */
+}
+
+.image {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.secondaryImage {
+  display: none;
+}
+
+.buttonContainer {
+  background-color: var(--Base-Background-Primary-Normal);
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .imageContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--Spacing-x2);
+  }
+
+  .image {
+    height: 240px;
+  }
+
+  .secondaryImage {
+    display: block;
+  }
+}

components/ContentType/HotelPage/SidePeeks/index.ts

@@ -1,5 +1,6 @@
 export { default as AboutTheHotelSidePeek } from "./AboutTheHotel"
 export { default as ActivitiesSidePeek } from "./Activities"
 export { default as AmenitiesSidePeek } from "./Amenities"
+export { default as MeetingsAndConferencesSidePeek } from "./MeetingsAndConferences"
 export { default as RoomSidePeek } from "./Room"
 export { default as WellnessAndExerciseSidePeek } from "./WellnessAndExercise"

components/ContentType/HotelPage/index.tsx

@@ -1,9 +1,6 @@
 import { notFound } from "next/navigation"
 
-import {
+import { restaurantAndBar } from "@/constants/routes/hotelPageParams"
-  meetingsAndConferences,
-  restaurantAndBar,
-} from "@/constants/routes/hotelPageParams"
 import { env } from "@/env/server"
 import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
 
@@ -30,6 +27,7 @@ import {
   AboutTheHotelSidePeek,
   ActivitiesSidePeek,
   AmenitiesSidePeek,
+  MeetingsAndConferencesSidePeek,
   RoomSidePeek,
   WellnessAndExerciseSidePeek,
 } from "./SidePeeks"
@@ -203,13 +201,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
         {activitiesCard && (
           <ActivitiesSidePeek contentPage={activitiesCard.contentPage} />
         )}
-        <SidePeek
+        <MeetingsAndConferencesSidePeek
-          contentKey={meetingsAndConferences[lang]}
+          meetingFacilities={conferencesAndMeetings}
-          title={intl.formatMessage({ id: "Meetings & Conferences" })}
+          descriptions={hotelContent.texts.meetingDescription}
-        >
+        />
-          {/* TODO */}
-          Meetings & Conferences
-        </SidePeek>
         {roomCategories.map((room) => (
           <RoomSidePeek key={room.name} room={room} />
         ))}

components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx

@@ -1,14 +1,18 @@
 "use client"
 import { useIntl } from "react-intl"
+import { useReactToPrint } from "react-to-print"
 
 import { DownloadIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
-export default function DownloadInvoice() {
+import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
+
+export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
   const intl = useIntl()
+  const reactToPrintFn = useReactToPrint({ contentRef: mainRef })
 
   function downloadBooking() {
-    window.print()
+    reactToPrintFn()
   }
 
   return (

components/HotelReservation/BookingConfirmation/Header/index.tsx

@@ -1,9 +1,9 @@
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+"use client"
+import { useIntl } from "react-intl"
 
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import AddToCalendar from "./Actions/AddToCalendar"
 import DownloadInvoice from "./Actions/DownloadInvoice"
@@ -14,13 +14,14 @@ import styles from "./header.module.css"
 
 import type { EventAttributes } from "ics"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header"
 
-export default async function Header({
+export default function Header({
-  confirmationNumber,
+  booking,
-}: BookingConfirmationProps) {
+  hotel,
-  const intl = await getIntl()
+  mainRef,
-  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
+}: BookingConfirmationHeaderProps) {
+  const intl = useIntl()
 
   const text = intl.formatMessage<React.ReactNode>(
     { id: "booking.confirmation.text" },
@@ -70,7 +71,7 @@ export default async function Header({
           hotelName={hotel.name}
         />
         <ManageBooking />
-        <DownloadInvoice />
+        <DownloadInvoice mainRef={mainRef} />
       </div>
     </header>
   )

components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx

@@ -1,20 +1,19 @@
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+"use client"
+import { useIntl } from "react-intl"
 
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { Toast } from "@/components/TempDesignSystem/Toasts"
-import { getIntl } from "@/i18n"
 
 import styles from "./hotelDetails.module.css"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import type { BookingConfirmationHotelDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/hotelDetails"
 
-export default async function HotelDetails({
+export default function HotelDetails({
-  confirmationNumber,
+  hotel,
-}: BookingConfirmationProps) {
+}: BookingConfirmationHotelDetailsProps) {
-  const intl = await getIntl()
+  const intl = useIntl()
-  const { hotel } = await getBookingConfirmation(confirmationNumber)
   return (
     <div className={styles.container}>
       <div className={styles.details}>

components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx

@@ -1,23 +1,23 @@
+"use client"
+import { useIntl } from "react-intl"
+
 import { dt } from "@/lib/dt"
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
 import { CreditCardAddIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { getIntl } from "@/i18n"
+import useLang from "@/hooks/useLang"
-import { getLang } from "@/i18n/serverContext"
 
 import styles from "./paymentDetails.module.css"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import type { BookingConfirmationPaymentDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/paymentDetails"
 
-export default async function PaymentDetails({
+export default function PaymentDetails({
-  confirmationNumber,
+  booking,
-}: BookingConfirmationProps) {
+}: BookingConfirmationPaymentDetailsProps) {
-  const intl = await getIntl()
+  const intl = useIntl()
-  const lang = getLang()
+  const lang = useLang()
-  const { booking } = await getBookingConfirmation(confirmationNumber)
   return (
     <div className={styles.details}>
       <Subtitle color="uiTextHighContrast" type="two">

components/HotelReservation/BookingConfirmation/Promos/index.tsx

@@ -1,11 +1,12 @@
-import { getIntl } from "@/i18n"
+"use client"
+import { useIntl } from "react-intl"
 
 import Promo from "./Promo"
 
 import styles from "./promos.module.css"
 
-export default async function Promos() {
+export default function Promos() {
-  const intl = await getIntl()
+  const intl = useIntl()
   return (
     <div className={styles.promos}>
       <Promo

components/HotelReservation/BookingConfirmation/Receipt/index.tsx

@@ -1,6 +1,6 @@
+"use client"
 import { notFound } from "next/navigation"
-
+import { useIntl } from "react-intl"
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
 import { ChevronRightSmallIcon, InfoCircleIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
@@ -9,21 +9,20 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { getIntl } from "@/i18n"
-import { getBookedHotelRoom } from "@/utils/getBookedHotelRoom"
 
 import styles from "./receipt.module.css"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 
-export default async function Receipt({
+export default function Receipt({
-  confirmationNumber,
+  booking,
-}: BookingConfirmationProps) {
+  hotel,
-  const intl = await getIntl()
+  room,
-  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
+}: BookingConfirmationReceiptProps) {
-  const roomAndBed = getBookedHotelRoom(hotel, booking.roomTypeCode ?? "")
+  const intl = useIntl()
-  if (!roomAndBed) {
+
+  if (!room) {
     return notFound()
   }
 
@@ -38,7 +37,7 @@ export default async function Receipt({
       <Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
       <article className={styles.room}>
         <header className={styles.roomHeader}>
-          <Body color="uiTextHighContrast">{roomAndBed.name}</Body>
+          <Body color="uiTextHighContrast">{room.name}</Body>
           {booking.rateDefinition.isMemberRate ? (
             <div className={styles.memberPrice}>
               <Body color="uiTextPlaceholder">
@@ -82,9 +81,7 @@ export default async function Receipt({
           </Link>
         </header>
         <div className={styles.entry}>
-          <Body color="uiTextHighContrast">
+          <Body color="uiTextHighContrast">{room.bedType.description}</Body>
-            {roomAndBed.bedType.description}
-          </Body>
           <Body color="uiTextHighContrast">
             {intl.formatNumber(0, {
               currency: booking.currencyCode,

components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -1,3 +1,6 @@
+"use client"
+import { useIntl } from "react-intl"
+
 import { dt } from "@/lib/dt"
 
 import {
@@ -10,16 +13,15 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { getIntl } from "@/i18n"
+import useLang from "@/hooks/useLang"
-import { getLang } from "@/i18n/serverContext"
 
 import styles from "./room.module.css"
 
-import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/room"
+import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"
 
-export default async function Room({ booking, img, roomName }: RoomProps) {
+export default function Room({ booking, img, roomName }: RoomProps) {
-  const intl = await getIntl()
+  const intl = useIntl()
-  const lang = getLang()
+  const lang = useLang()
 
   const fromDate = dt(booking.checkInDate).locale(lang)
   const toDate = dt(booking.checkOutDate).locale(lang)

components/HotelReservation/BookingConfirmation/Rooms/index.tsx

@@ -1,30 +1,23 @@
+"use client"
+
 import { notFound } from "next/navigation"
 
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
-
-import { getBookedHotelRoom } from "@/utils/getBookedHotelRoom"
-
 import Room from "./Room"
 
 import styles from "./rooms.module.css"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
 
-export default async function Rooms({
+export default function Rooms({
-  confirmationNumber,
+  booking,
-}: BookingConfirmationProps) {
+  room,
-  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
+}: BookingConfirmationRoomsProps) {
-  const roomAndBed = getBookedHotelRoom(hotel, booking.roomTypeCode ?? "")
+  if (!room) {
-  if (!roomAndBed) {
     return notFound()
   }
   return (
     <section className={styles.rooms}>
-      <Room
+      <Room booking={booking} img={room.images[0]} roomName={room.name} />
-        booking={booking}
-        img={roomAndBed.images[0]}
-        roomName={roomAndBed.name}
-      />
     </section>
   )
 }

components/HotelReservation/BookingConfirmation/index.tsx

@@ -0,0 +1,57 @@
+"use client"
+import { use, useRef } from "react"
+
+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 SidePanel from "@/components/HotelReservation/SidePanel"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import styles from "./confirmation.module.css"
+
+import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default function BookingConfirmation({
+  bookingConfirmationPromise,
+}: BookingConfirmationProps) {
+  const bookingConfirmation = use(bookingConfirmationPromise)
+  const mainRef = useRef<HTMLElement | null>(null)
+  return (
+    <main className={styles.main} ref={mainRef}>
+      <Header
+        booking={bookingConfirmation.booking}
+        hotel={bookingConfirmation.hotel}
+        mainRef={mainRef}
+      />
+      <div className={styles.booking}>
+        <Rooms
+          booking={bookingConfirmation.booking}
+          room={bookingConfirmation.room}
+        />
+        <PaymentDetails booking={bookingConfirmation.booking} />
+        <Divider color="primaryLightSubtle" />
+        <HotelDetails hotel={bookingConfirmation.hotel} />
+        <Promos />
+        <div className={styles.mobileReceipt}>
+          <Receipt
+            booking={bookingConfirmation.booking}
+            hotel={bookingConfirmation.hotel}
+            room={bookingConfirmation.room}
+          />
+        </div>
+      </div>
+      <aside className={styles.aside}>
+        <SidePanel variant="receipt">
+          <Receipt
+            booking={bookingConfirmation.booking}
+            hotel={bookingConfirmation.hotel}
+            room={bookingConfirmation.room}
+          />
+        </SidePanel>
+      </aside>
+    </main>
+  )
+}

components/HotelReservation/Contact/contact.module.css

@@ -4,6 +4,7 @@
   grid-template-rows: auto;
   gap: var(--Spacing-x2);
   font-family: var(--typography-Body-Regular-fontFamily);
+  margin-bottom: var(--Spacing-x3);
 }
 
 .address,
@@ -20,6 +21,7 @@
   list-style-type: none;
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .soMeIcons {
@@ -28,6 +30,19 @@
 }
 
 .ecoLabel {
+  width: 38px;
+  height: auto;
+}
+
+.ecoLabel img {
+  width: 100%;
+  height: auto;
+  flex-shrink: 0;
+  grid-column: 1 / 3;
+  grid-row: 4 / 4;
+}
+
+.ecoContainer {
   display: flex;
   align-items: center;
   column-gap: var(--Spacing-x-one-and-half);
@@ -38,10 +53,6 @@
   margin-bottom: var(--Spacing-x1);
 }
 
-.ecoLabel img {
-  flex-shrink: 0;
-}
-
 .ecoLabelText {
   display: flex;
   color: var(--UI-Text-Medium-contrast);
@@ -49,8 +60,8 @@
   justify-content: center;
 }
 
-.googleMaps {
+.link {
-  text-decoration: none;
+  text-decoration: underline;
   font-family: var(--typography-Body-Regular-fontFamily);
-  color: var(--Base-Text-Medium-contrast);
+  color: var(--Base-Text-High-contrast);
 }

components/HotelReservation/Contact/index.tsx

@@ -24,31 +24,27 @@ export default function Contact({ hotel }: ContactProps) {
             <Body textTransform="bold">
               {intl.formatMessage({ id: "Address" })}
             </Body>
-            <Body>
+            <Body>{`${hotel.address.streetAddress}, `}</Body>
-              {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+            <Body>{hotel.address.city}</Body>
-            </Body>
           </li>
           <li>
             <Body textTransform="bold">
               {intl.formatMessage({ id: "Driving directions" })}
             </Body>
-            <a
+            <Link
               href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
-              className={styles.googleMaps}
-              target="_blank"
             >
-              Google Maps
+              <span className={styles.link}>Google Maps</span>
-            </a>
+            </Link>
           </li>
           <li>
             <Body textTransform="bold">
               {intl.formatMessage({ id: "Contact us" })}
             </Body>
-            <Link
+            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
-              href={`tel:${hotel.contactInformation.phoneNumber}`}
+              <span className={styles.link}>
-              color="peach80"
+                {hotel.contactInformation.phoneNumber}
-            >
+              </span>
-              {hotel.contactInformation.phoneNumber}
             </Link>
           </li>
           <li>
@@ -76,23 +72,24 @@ export default function Contact({ hotel }: ContactProps) {
             <Body textTransform="bold">
               {intl.formatMessage({ id: "Email" })}
             </Body>
-            <Link
+            <Link href={`mailto:${hotel.contactInformation.email}`}>
-              href={`mailto:${hotel.contactInformation.email}`}
+              <span className={styles.link}>
-              color="peach80"
+                {hotel.contactInformation.email}
-            >
+              </span>
-              {hotel.contactInformation.email}
             </Link>
           </li>
         </ul>
       </address>
       {hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
-        <div className={styles.ecoLabel}>
+        <div className={styles.ecoContainer}>
-          <Image
+          <div className={styles.ecoLabel}>
-            height={38}
+            <Image
-            width={43}
+              height={38}
-            alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
+              width={38}
-            src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
+              alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
-          />
+              src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
+            />
+          </div>
           <div className={styles.ecoLabelText}>
             <span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
             <span>

components/ImageGallery/index.tsx

@@ -6,7 +6,8 @@ import { useIntl } from "react-intl"
 import { GalleryIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import Caption from "../TempDesignSystem/Text/Caption"
 
 import styles from "./imageGallery.module.css"
 
@@ -44,9 +45,9 @@ function ImageGallery({
         />
         <div className={styles.imageCount}>
           <GalleryIcon color="white" />
-          <Footnote color="white" type="label">
+          <Caption color="white" type="label">
             {images.length}
-          </Footnote>
+          </Caption>
         </div>
       </div>
       <Lightbox

components/Lightbox/Lightbox.module.css

@@ -122,6 +122,7 @@
   grid-template-columns: 1fr 1fr;
   gap: var(--Spacing-x1);
   max-height: none;
+  padding: var(--Spacing-x3) 0;
 }
 
 .thumbnailContainer {

components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx

@@ -14,6 +14,7 @@ export default function Accessibility({
     <AccordionItem
       title={intl.formatMessage({ id: "Accessibility" })}
       icon={IconName.Accessibility}
+      variant="sidepeek"
     >
       <Body>{accessibilityElevatorPitchText}</Body>
     </AccordionItem>

components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx

@@ -13,6 +13,7 @@ export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
     <AccordionItem
       title={intl.formatMessage({ id: "Check-in/Check-out" })}
       icon={IconName.Calendar}
+      variant="sidepeek"
     >
       <Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body>
       <Body>{`${intl.formatMessage({ id: "Check in from" })}: ${checkin.checkInTime}`}</Body>

components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx

@@ -14,6 +14,7 @@ export default function MeetingsAndConferences({
     <AccordionItem
       title={intl.formatMessage({ id: "Meetings & Conferences" })}
       icon={IconName.Business}
+      variant="sidepeek"
     >
       <Body>{meetingDescription}</Body>
     </AccordionItem>

components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx

@@ -16,6 +16,7 @@ export default function Parking({ parking }: ParkingProps) {
       title={intl.formatMessage({ id: "Parking" })}
       icon={IconName.Parking}
       className={styles.parking}
+      variant="sidepeek"
     >
       {parking.map((p) => (
         <div key={p.name}>

components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx

@@ -15,6 +15,7 @@ export default function Restaurant({
     <AccordionItem
       title={intl.formatMessage({ id: "Restaurant" }, { count: 1 })}
       icon={IconName.Restaurant}
+      variant="sidepeek"
     >
       <Body>{restaurantsContentDescriptionMedium}</Body>
     </AccordionItem>

components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css

@@ -10,6 +10,7 @@
   align-items: center;
   gap: var(--Spacing-x1);
   padding-left: var(--Spacing-x1);
+  justify-items: flex-start;
 }
 
 .list li svg {

components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css

@@ -9,13 +9,24 @@
   gap: var(--Spacing-x2);
 }
 
-.amenity {
+.content:last-child {
-  font-family: var(--typography-Body-Regular-fontFamily);
+  gap: 0;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
-  /* padding set to align with AccordionItem which has a different composition */
+
-  padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half))
+.content > p {
-    var(--Spacing-x3);
+  margin-bottom: var(--Spacing-x-one-and-half);
+}
+
+.content > ul > li:first-child {
+  border-top: 1px solid var(--Base-Border-Subtle);
+}
+
+.amenity > p {
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding: calc(var(--Spacing-x-one-and-half) + var(--Spacing-x1))
+    var(--Spacing-x1);
   display: flex;
+  align-items: center;
   gap: var(--Spacing-x1);
 }
 

components/SidePeeks/HotelSidePeek/index.tsx

@@ -71,24 +71,21 @@ export default function HotelSidePeek({
               }
             />
           )}
+        </Accordion>
+        <div className={styles.amenity}>
           {amenitiesList.map((amenity) => {
             const Icon = mapFacilityToIcon(amenity.id)
             return (
-              <div key={amenity.id} className={styles.amenity}>
+              <Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
                 {Icon && (
-                  <Icon width={24} height={24} color="uiTextMediumContrast" />
+                  <Icon width={24} height={24} color="uiTextHighContrast" />
                 )}
-                <Body
+                {amenity.name}
-                  asChild
+              </Subtitle>
-                  className={!Icon ? styles.noIcon : undefined}
-                  color="uiTextMediumContrast"
-                >
-                  <span>{amenity.name}</span>
-                </Body>
-              </div>
             )
           })}
-        </Accordion>
+        </div>
+
         {/*     TODO: handle linking to Hotel Page */}
         {/*     {showCTA && ( 
           <Button theme="base" intent="secondary" size="large">

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -6,6 +6,10 @@
   padding: var(--Spacing-x1);
 }
 
+.accordionItem.sidepeek {
+  padding: var(--Spacing-x1) 0;
+}
+
 .summary {
   position: relative;
   display: flex;
@@ -18,7 +22,7 @@
   font-weight: var(--typography-Body-Bold-fontWeight);
   transition: background-color 0.3s;
 }
-.summary:hover {
+.summary.card:hover {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 .accordionItem.light .summary:hover {
@@ -33,6 +37,11 @@
   border-radius: var(--Corner-radius-Medium);
 }
 
+.accordionItem.sidepeek .summary {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  align-items: center;
+}
+
 .title {
   flex-grow: 1;
 }

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -50,16 +50,10 @@ export default function AccordionItem({
     <li className={accordionItemVariants({ className, variant, theme })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
-          {IconComp && <IconComp className={styles.icon} color="burgundy" />}
+          {IconComp && (
-          {variant === "card" ? (
+            <IconComp className={styles.icon} color="baseTextHighcontrast" />
-            <Body
+          )}
-              textTransform="bold"
+          {variant === "sidepeek" ? (
-              color="baseTextHighContrast"
-              className={styles.title}
-            >
-              {title}
-            </Body>
-          ) : (
             <Subtitle
               className={styles.title}
               type="two"
@@ -67,6 +61,14 @@ export default function AccordionItem({
             >
               {title}
             </Subtitle>
+          ) : (
+            <Body
+              textTransform="bold"
+              color="baseTextHighContrast"
+              className={styles.title}
+            >
+              {title}
+            </Body>
           )}
           <ChevronDownIcon
             className={styles.chevron}

components/TempDesignSystem/Accordion/AccordionItem/variants.ts

@@ -6,6 +6,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
   variants: {
     variant: {
       card: styles.card,
+      sidepeek: styles.sidepeek,
     },
     theme: {
       default: styles.default,

components/TempDesignSystem/Accordion/variants.ts

@@ -6,6 +6,7 @@ export const accordionVariants = cva(styles.accordion, {
   variants: {
     variant: {
       card: styles.card,
+      sidepeek: styles.sidepeek,
     },
     theme: {
       default: styles.default,

i18n/dictionaries/da.json

@@ -95,6 +95,7 @@
   "Could not find requested resource": "Kunne ikke finde den anmodede ressource",
   "Country": "Land",
   "Country code": "Landekode",
+  "Creative spaces for meetings": "Kreative rum til møder",
   "Credit card": "Kreditkort",
   "Credit card deleted successfully": "Kreditkort blev slettet",
   "Currency Code": "DKK",

i18n/dictionaries/de.json

@@ -95,6 +95,7 @@
   "Could not find requested resource": "Die angeforderte Ressource konnte nicht gefunden werden.",
   "Country": "Land",
   "Country code": "Landesvorwahl",
+  "Creative spaces for meetings": "Kreative Räume für Meetings",
   "Credit card": "Kreditkarte",
   "Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht",
   "Currency Code": "EUR",

i18n/dictionaries/en.json

@@ -103,6 +103,7 @@
   "Could not find requested resource": "Could not find requested resource",
   "Country": "Country",
   "Country code": "Country code",
+  "Creative spaces for meetings": "Creative spaces for meetings",
   "Credit card": "Credit card",
   "Credit card deleted successfully": "Credit card deleted successfully",
   "Currency Code": "EUR",

i18n/dictionaries/fi.json

@@ -95,6 +95,7 @@
   "Could not find requested resource": "Pyydettyä resurssia ei löytynyt",
   "Country": "Maa",
   "Country code": "Maatunnus",
+  "Creative spaces for meetings": "Luovia tiloja kokouksille",
   "Credit card": "Luottokortti",
   "Credit card deleted successfully": "Luottokortti poistettu onnistuneesti",
   "Currency Code": "EUR",

i18n/dictionaries/no.json

@@ -95,6 +95,7 @@
   "Could not find requested resource": "Kunne ikke finne den forespurte ressursen",
   "Country": "Land",
   "Country code": "Landskode",
+  "Creative spaces for meetings": "Kreative rom for møter",
   "Credit card deleted successfully": "Kredittkort slettet",
   "Currency Code": "NOK",
   "Current password": "Nåværende passord",

i18n/dictionaries/sv.json

@@ -95,6 +95,7 @@
   "Could not find requested resource": "Det gick inte att hitta den begärda resursen",
   "Country": "Land",
   "Country code": "Landskod",
+  "Creative spaces for meetings": "Kreativa utrymmen för möten",
   "Credit card deleted successfully": "Kreditkort har tagits bort",
   "Currency Code": "SEK",
   "Current password": "Nuvarande lösenord",

package-lock.json

@@ -54,6 +54,7 @@
         "react-hook-form": "^7.51.2",
         "react-international-phone": "^4.2.6",
         "react-intl": "^6.6.8",
+        "react-to-print": "^3.0.2",
         "server-only": "^0.0.1",
         "sonner": "^1.7.0",
         "superjson": "^2.2.1",
@@ -17417,6 +17418,14 @@
         }
       }
     },
+    "node_modules/react-to-print": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-3.0.2.tgz",
+      "integrity": "sha512-FS/Z4LLq0bgWaxd7obygFQ8yRFdKW74iE8fIVjFFsPJWIXmuL8CIO+4me1Hj44lrlxQ00gscSNb3BRM8olbwXg==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ~19"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",

package.json

@@ -69,6 +69,7 @@
     "react-hook-form": "^7.51.2",
     "react-international-phone": "^4.2.6",
     "react-intl": "^6.6.8",
+    "react-to-print": "^3.0.2",
     "server-only": "^0.0.1",
     "sonner": "^1.7.0",
     "superjson": "^2.2.1",

server/routers/booking/query.ts

@@ -8,6 +8,7 @@ import { router, serviceProcedure } from "@/server/trpc"
 import { getHotelData } from "../hotels/query"
 import { bookingConfirmationInput, getBookingStatusInput } from "./input"
 import { bookingConfirmationSchema, createBookingSchema } from "./output"
+import { getBookedHotelRoom } from "./utils"
 
 const meter = metrics.getMeter("trpc.booking")
 const getBookingConfirmationCounter = meter.createCounter(
@@ -144,6 +145,7 @@ export const bookingQueryRouter = router({
           ...hotelData.data.attributes,
           included: hotelData.included,
         },
+        room: getBookedHotelRoom(hotelData.included, booking.data.roomTypeCode),
       }
     }),
   status: serviceProcedure.input(getBookingStatusInput).query(async function ({

server/routers/booking/utils.ts

@@ -0,0 +1,27 @@
+import { RoomData } from "@/types/hotel"
+import { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export function getBookedHotelRoom(
+  rooms: RoomData[] | 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,
+  }
+}

server/routers/contentstack/reward/query.ts

@@ -238,15 +238,18 @@ export const rewardQueryRouter = router({
       const nextCursor =
         limit + cursor < rewardIds.length ? limit + cursor : undefined
 
-      const surprisesIds = validatedApiRewards.data
+      const wrappedSurprisesIds = validatedApiRewards.data
         .filter(
-          ({ type, rewardType }) =>
+          (reward) =>
-            type === "coupon" && rewardType === "Surprise"
+            reward.type === "coupon" &&
+            reward.rewardType === "Surprise" &&
+            "coupon" in reward &&
+            reward.coupon?.some(({ unwrapped }) => !unwrapped)
         )
         .map(({ rewardId }) => rewardId)
 
       const rewards = cmsRewards.filter(
-        (reward) => !surprisesIds.includes(reward.reward_id)
+        (reward) => !wrappedSurprisesIds.includes(reward.reward_id)
       )
 
       getCurrentRewardSuccessCounter.add(1)

types/components/hotelPage/sidepeek/meetingsAndConferences.ts

@@ -0,0 +1,7 @@
+import type { Hotel } from "@/types/hotel"
+
+export type MeetingsAndConferencesSidePeekProps = {
+  meetingFacilities: Hotel["conferencesAndMeetings"]
+  descriptions: Hotel["hotelContent"]["texts"]["meetingDescription"]
+  link?: string
+}

types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice.ts

@@ -0,0 +1,5 @@
+import type { MutableRefObject } from "react"
+
+export interface DownloadInvoiceProps {
+  mainRef: MutableRefObject<HTMLElement | null>
+}

types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts

@@ -1,3 +1,5 @@
+import type { RouterOutput } from "@/lib/trpc/client"
+
 export interface BookingConfirmationProps {
-  confirmationNumber: string
+  bookingConfirmationPromise: Promise<RouterOutput["booking"]["confirmation"]>
 }

types/components/hotelReservation/bookingConfirmation/header.ts

@@ -0,0 +1,8 @@
+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>
+}

types/components/hotelReservation/bookingConfirmation/hotelDetails.ts

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

types/components/hotelReservation/bookingConfirmation/paymentDetails.ts

@@ -0,0 +1,4 @@
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export interface BookingConfirmationPaymentDetailsProps
+  extends Pick<BookingConfirmation, "booking"> {}

types/components/hotelReservation/bookingConfirmation/receipt.ts

@@ -0,0 +1,3 @@
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export interface BookingConfirmationReceiptProps extends BookingConfirmation {}

types/components/hotelReservation/bookingConfirmation/room.ts

@@ -1,11 +0,0 @@
-import { RouterOutput } from "@/lib/trpc/client"
-
-export interface RoomProps {
-  booking: RouterOutput["booking"]["confirmation"]["booking"]
-  img: NonNullable<
-    RouterOutput["booking"]["confirmation"]["hotel"]["included"]
-  >[number]["images"][number]
-  roomName: NonNullable<
-    RouterOutput["booking"]["confirmation"]["hotel"]["included"]
-  >[number]["name"]
-}

types/components/hotelReservation/bookingConfirmation/rooms.ts

@@ -0,0 +1,4 @@
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export interface BookingConfirmationRoomsProps
+  extends Pick<BookingConfirmation, "booking" | "room"> {}

types/components/hotelReservation/bookingConfirmation/rooms/room.ts

@@ -0,0 +1,7 @@
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export interface RoomProps {
+  booking: BookingConfirmation["booking"]
+  img: NonNullable<BookingConfirmation["room"]>["images"][number]
+  roomName: NonNullable<BookingConfirmation["room"]>["name"]
+}

types/trpc/routers/booking/confirmation.ts

@@ -0,0 +1,19 @@
+import { z } from "zod"
+
+import { bookingConfirmationSchema } from "@/server/routers/booking/output"
+
+import { Hotel, RoomData } from "@/types/hotel"
+
+export interface BookingConfirmationSchema
+  extends z.output<typeof bookingConfirmationSchema> {}
+export interface BookingConfirmation {
+  booking: BookingConfirmationSchema
+  hotel: Hotel & {
+    included?: RoomData[]
+  }
+  room:
+    | (RoomData & {
+        bedType: RoomData["roomTypes"][number]
+      })
+    | null
+}

utils/getBookedHotelRoom.ts

@@ -1,23 +0,0 @@
-import type { RouterOutput } from "@/lib/trpc/client"
-
-export function getBookedHotelRoom(
-  hotel: RouterOutput["booking"]["confirmation"]["hotel"],
-  roomTypeCode: string
-) {
-  const room = hotel.included?.find((include) => {
-    return include.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,
-  }
-}