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/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import Modal from "@/components/Modal"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./room.module.css"
+
+import type { BookingConfirmationReceiptRoomProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+
+export default function ReceiptRoom({
+  booking,
+  room,
+  roomNumber,
+}: BookingConfirmationReceiptRoomProps) {
+  const intl = useIntl()
+
+  const breakfastPkgSelected = booking.packages.find(
+    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
+  )
+  const breakfastPkgIncluded = booking.packages.find(
+    (pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
+  )
+
+  return (
+    <article className={styles.room}>
+      {roomNumber !== null ? (
+        <Body color="uiTextHighContrast" textTransform={"bold"}>
+          {intl.formatMessage(
+            { id: "Room {roomIndex}" },
+            { roomIndex: roomNumber }
+          )}
+        </Body>
+      ) : null}
+      <header className={styles.roomHeader}>
+        <Body color="uiTextHighContrast">{room.name}</Body>
+        {booking.rateDefinition.isMemberRate ? (
+          <div className={styles.memberPrice}>
+            <Body color="red">
+              {formatPrice(intl, booking.roomPrice, booking.currencyCode)}
+            </Body>
+          </div>
+        ) : (
+          <Body color="uiTextHighContrast">
+            {formatPrice(intl, booking.roomPrice, booking.currencyCode)}
+          </Body>
+        )}
+        <Caption color="uiTextMediumContrast">
+          {intl.formatMessage(
+            { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
+            {
+              totalAdults: booking.adults,
+            }
+          )}
+        </Caption>
+        <Caption color="uiTextMediumContrast">
+          {booking.rateDefinition.cancellationText}
+        </Caption>
+        <Modal
+          trigger={
+            <Button intent="text" className={styles.termsLink}>
+              <Link
+                color="peach80"
+                href=""
+                size="small"
+                textDecoration="underline"
+                variant="icon"
+              >
+                {intl.formatMessage({ id: "Reservation policy" })}
+                <InfoCircleIcon color="peach80" />
+              </Link>
+            </Button>
+          }
+          title={booking.rateDefinition.cancellationText || ""}
+          subtitle={
+            booking.rateDefinition.cancellationRule == "CancellableBefore6PM"
+              ? intl.formatMessage({ id: "Pay later" })
+              : intl.formatMessage({ id: "Pay now" })
+          }
+        >
+          <div className={styles.terms}>
+            {booking.rateDefinition.generalTerms?.map((info) => (
+              <Body
+                key={info}
+                color="uiTextHighContrast"
+                className={styles.termsText}
+              >
+                <CheckIcon
+                  color="uiSemanticSuccess"
+                  width={20}
+                  height={20}
+                  className={styles.termsIcon}
+                ></CheckIcon>
+                {info}
+              </Body>
+            ))}
+          </div>
+        </Modal>
+      </header>
+      <div className={styles.entry}>
+        <Body color="uiTextHighContrast">{room.bedType.description}</Body>
+        <Body color="uiTextHighContrast">
+          {formatPrice(intl, 0, booking.currencyCode)}
+        </Body>
+      </div>
+      <div className={styles.entry}>
+        <Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
+        {booking.rateDefinition.breakfastIncluded ?? breakfastPkgIncluded ? (
+          <Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
+        ) : null}
+        {breakfastPkgSelected ? (
+          <Body color="uiTextHighContrast">
+            {formatPrice(
+              intl,
+              breakfastPkgSelected.totalPrice,
+              breakfastPkgSelected.currency
+            )}
+          </Body>
+        ) : null}
+      </div>
+    </article>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css
@@ -0,0 +1,42 @@
+.room {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.roomHeader {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.roomHeader :nth-child(n + 3) {
+  grid-column: 1/-1;
+}
+
+.memberPrice {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
+.entry {
+  display: flex;
+  justify-content: space-between;
+}
+
+.termsLink {
+  justify-self: flex-start;
+}
+
+.terms {
+  padding-top: var(--Spacing-x3);
+}
+
+.termsText:nth-child(n) {
+  display: flex;
+  align-items: center;
+  padding-bottom: var(--Spacing-x1);
+}
+
+.terms .termsIcon {
+  padding-right: var(--Spacing-x1);
+}