Merged in feat/SW-1652-confirmation-page-multiroom (pull request #1404)

feat(SW-1652): Fetching additional rooms on confirmation page * feat(SW-1652): Fetching additional rooms on confirmation page Approved-by: Tobias Johansson
2025-02-26 12:42:54 +00:00
parent a15936688b
commit d5e5b9a526
24 changed files with 606 additions and 425 deletions
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Rooms/index.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import Room from "../Room"
+
+import styles from "./rooms.module.css"
+
+import type { BookingConfirmationReceiptRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
+
+export default function ReceiptRooms({
+  booking,
+  room,
+  linkedReservations,
+}: BookingConfirmationReceiptRoomsProps) {
+  const intl = useIntl()
+
+  if (linkedReservations.some((reservation) => !reservation)) {
+    return null
+  }
+
+  const grandTotal = linkedReservations.reduce((acc, reservation) => {
+    const reservationTotalPrice = reservation?.booking.totalPrice || 0
+    return acc + reservationTotalPrice
+  }, booking.totalPrice)
+
+  return (
+    <>
+      <Room
+        booking={booking}
+        room={room}
+        roomNumber={linkedReservations.length ? 1 : null}
+      />
+      {linkedReservations.map((reservation, idx) => {
+        if (!reservation?.room) {
+          return null
+        }
+        return (
+          <Room
+            key={reservation?.booking.confirmationNumber}
+            booking={reservation.booking}
+            room={reservation.room}
+            roomNumber={idx + 2}
+          />
+        )
+      })}
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.price}>
+        <div className={styles.entry}>
+          <Body textTransform="bold">
+            {intl.formatMessage({ id: "Total price" })}
+          </Body>
+          <Body textTransform="bold">
+            {formatPrice(intl, grandTotal, booking.currencyCode)}
+          </Body>
+        </div>
+        <div className={styles.entry}>
+          <Button
+            className={styles.btn}
+            intent="text"
+            size="small"
+            theme="base"
+            variant="icon"
+            wrapping
+          >
+            {intl.formatMessage({ id: "Price details" })}
+            <ChevronRightSmallIcon />
+          </Button>
+          <Caption color="uiTextMediumContrast">
+            {intl.formatMessage(
+              { id: "Approx. {value}" },
+              {
+                value: "N/A",
+              }
+            )}
+          </Caption>
+        </div>
+      </div>
+    </>
+  )
+}