Merged in fix/missing-confirmation-page-room-titles (pull request #1424)

fix: add missing room titles

* fix: add missing room titles


Approved-by: Tobias Johansson

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

@@ -30,9 +30,6 @@ export default function Room({ booking, img, roomName }: RoomProps) {
   return (
     <article className={styles.room}>
       <header className={styles.header}>
-        {/* <Subtitle color="mainGrey60" type="two">
-          {intl.formatMessage({ id: "Room" })} 1
-        </Subtitle> */}
         <div className={styles.benefits}>
           {booking.rateDefinition.isMemberRate ? (
             <>

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

@@ -7,29 +7,47 @@ import Room from "./Room"
 import styles from "./rooms.module.css"
 
 import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
 
-export default function Rooms({
+export default async function Rooms({
   booking,
   mainRoom,
   linkedReservations,
 }: BookingConfirmationRoomsProps) {
+  const intl = await getIntl()
   return (
     <section className={styles.rooms}>
-      <Room
+      <div className={styles.room}>
-        booking={booking}
+        {linkedReservations.length ? (
-        img={mainRoom.images[0]}
+          <Subtitle color="mainGrey60" type="two">
-        roomName={mainRoom.name}
+            {intl.formatMessage({ id: "Room {roomIndex}" }, { roomIndex: 1 })}
-      />
+          </Subtitle>
+        ) : null}
+        <Room
+          booking={booking}
+          img={mainRoom.images[0]}
+          roomName={mainRoom.name}
+        />
+      </div>
 
-      {linkedReservations?.map((reservation) => (
+      {linkedReservations?.map((reservation, idx) => (
-        <Suspense
+        <div className={styles.room}>
-          key={reservation.confirmationNumber}
+          <Subtitle color="mainGrey60" type="two">
-          fallback={<LinkedReservationCardSkeleton />}
+            {intl.formatMessage(
-        >
+              { id: "Room {roomIndex}" },
-          <LinkedReservation
+              { roomIndex: idx + 2 }
-            confirmationNumber={reservation.confirmationNumber}
+            )}
-          />
+          </Subtitle>
-        </Suspense>
+          <Suspense
+            key={reservation.confirmationNumber}
+            fallback={<LinkedReservationCardSkeleton />}
+          >
+            <LinkedReservation
+              confirmationNumber={reservation.confirmationNumber}
+            />
+          </Suspense>
+        </div>
       ))}
     </section>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/rooms.module.css

@@ -3,3 +3,9 @@
   flex-direction: column;
   gap: var(--Spacing-x5);
 }
+
+.room {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}