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,21 +7,38 @@ 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}>
+      <div className={styles.room}>
+        {linkedReservations.length ? (
+          <Subtitle color="mainGrey60" type="two">
+            {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) => (
+        <div className={styles.room}>
+          <Subtitle color="mainGrey60" type="two">
+            {intl.formatMessage(
+              { id: "Room {roomIndex}" },
+              { roomIndex: idx + 2 }
+            )}
+          </Subtitle>
           <Suspense
             key={reservation.confirmationNumber}
             fallback={<LinkedReservationCardSkeleton />}
@@ -30,6 +47,7 @@ export default function Rooms({
               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);
+}