Merged in chore/SW-2878-extract-booking-confirmation-pag (pull request #2779)

Chore/SW-2878 extract booking confirmation pag

* chore(SW-2878): Moved booking confirmation page to booking-flow package

* chore(SW-2878): Fixed promo styles as per design

* chore(SW-2878): Kept tiny duplicate function to avoid export from booking-flow package


Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/BookingConfirmation/Rooms/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { LinkedReservation } from "./LinkedReservation"
+import { Room } from "./Room"
+
+import styles from "./rooms.module.css"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+import type { Room as RoomProp } from "@scandic-hotels/trpc/types/hotel"
+
+export interface BookingConfirmationRoomsProps
+  extends Pick<BookingConfirmation, "booking"> {
+  mainRoom: RoomProp & {
+    bedType: RoomProp["roomTypes"][number]
+  }
+  checkInTime: string
+  checkOutTime: string
+}
+
+export function Rooms({
+  booking,
+  checkInTime,
+  checkOutTime,
+  mainRoom,
+}: BookingConfirmationRoomsProps) {
+  const intl = useIntl()
+
+  return (
+    <section className={styles.rooms}>
+      <div className={styles.room}>
+        {booking.linkedReservations.length ? (
+          <Typography variant="Title/Subtitle/md">
+            <h2 className={styles.roomTitle}>
+              {intl.formatMessage(
+                {
+                  defaultMessage: "Room {roomIndex}",
+                },
+                { roomIndex: 1 }
+              )}
+            </h2>
+          </Typography>
+        ) : null}
+        <Room
+          booking={booking}
+          checkInTime={checkInTime}
+          checkOutTime={checkOutTime}
+          img={mainRoom.images[0]}
+          roomName={mainRoom.name}
+        />
+      </div>
+
+      {booking.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>
+          <LinkedReservation
+            checkInTime={checkInTime}
+            checkOutTime={checkOutTime}
+            refId={reservation.refId}
+            roomIndex={idx + 1}
+          />
+        </div>
+      ))}
+    </section>
+  )
+}