Merged in feat/SW-1813 (pull request #1516)

Feat/SW-1813 * feat(SW-1652): handle linkedReservations fetching * feat: add linkedReservation retry functionality * chore: align naming * feat(SW-1813): Add booking confirmation PriceDetailsModal Approved-by: Simon.Emanuelsson
2025-03-14 13:49:22 +00:00
parent 66682be4d2
commit 540402b969
21 changed files with 414 additions and 65 deletions
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
@@ -4,9 +4,7 @@ import { useIntl } from "react-intl"

 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

-import { CreditCardAddIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"
@@ -16,10 +14,11 @@ import styles from "./paymentDetails.module.css"
 export default function PaymentDetails() {
  const intl = useIntl()

-  const rooms = useBookingConfirmationStore((state) => state.rooms)
-  const currencyCode = useBookingConfirmationStore(
-    (state) => state.currencyCode
-  )
+  const { rooms, currencyCode } = useBookingConfirmationStore((state) => ({
+    rooms: state.rooms,
+    currencyCode: state.currencyCode,
+  }))
+
  const hasAllRoomsLoaded = rooms.every((room) => room)
  const grandTotal = rooms.reduce((acc, room) => {
    const reservationTotalPrice = room?.totalPrice || 0
@@ -45,17 +44,6 @@ export default function PaymentDetails() {
          <SkeletonShimmer width={"100%"} />
        )}
      </div>
-      <Button
-        className={styles.btn}
-        intent="text"
-        size="small"
-        theme="base"
-        variant="icon"
-        wrapping
-      >
-        <CreditCardAddIcon />
-        {intl.formatMessage({ id: "Save card to profile" })}
-      </Button>
    </div>
  )
 }
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
@@ -0,0 +1,233 @@
+"use client"
+import React from "react"
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
+
+import { PriceTagIcon } from "@/components/Icons"
+import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
+import Modal from "@/components/Modal"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./priceDetailsModal.module.css"
+
+function Row({
+  label,
+  value,
+  bold,
+}: {
+  label: string
+  value: string
+  bold?: boolean
+}) {
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Caption type={bold ? "bold" : undefined}>{label}</Caption>
+      </td>
+      <td className={styles.price}>
+        <Caption type={bold ? "bold" : undefined}>{value}</Caption>
+      </td>
+    </tr>
+  )
+}
+
+function TableSection({ children }: React.PropsWithChildren) {
+  return <tbody className={styles.tableSection}>{children}</tbody>
+}
+
+function TableSectionHeader({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle?: string
+}) {
+  return (
+    <tr>
+      <th colSpan={2}>
+        <Body>{title}</Body>
+        {subtitle ? <Body>{subtitle}</Body> : null}
+      </th>
+    </tr>
+  )
+}
+
+export default function PriceDetailsModal() {
+  const intl = useIntl()
+  const lang = useLang()
+  const { rooms, currencyCode, vat, fromDate, toDate, bookingCode } =
+    useBookingConfirmationStore((state) => ({
+      rooms: state.rooms,
+      currencyCode: state.currencyCode,
+      vat: state.vat,
+      fromDate: state.fromDate,
+      toDate: state.toDate,
+      bookingCode: state.bookingCode,
+    }))
+
+  if (!rooms[0]) {
+    return null
+  }
+
+  const bookingTotal = rooms.reduce(
+    (acc, room) => {
+      if (room) {
+        return {
+          price: acc.price + room.totalPrice,
+          priceExVat: acc.priceExVat + room.totalPriceExVat,
+          vatAmount: acc.vatAmount + room.vatAmount,
+        }
+      }
+      return acc
+    },
+    { price: 0, priceExVat: 0, vatAmount: 0 }
+  )
+
+  const diff = dt(toDate).diff(fromDate, "days")
+  const nights = intl.formatMessage(
+    { id: "{totalNights, plural, one {# night} other {# nights}}" },
+    { totalNights: diff }
+  )
+
+  const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
+          -
+          ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
+  return (
+    <Modal
+      title={intl.formatMessage({ id: "Price details" })}
+      trigger={
+        <Button intent="text">
+          <Caption color="burgundy">
+            {intl.formatMessage({ id: "Price details" })}
+          </Caption>
+          <ChevronRightSmallIcon color="burgundy" height="20px" width="20px" />
+        </Button>
+      }
+    >
+      <table className={styles.priceDetailsTable}>
+        {rooms.map((room, idx) => {
+          return room ? (
+            <React.Fragment key={idx}>
+              <TableSection>
+                {rooms.length > 1 && (
+                  <Body textTransform="bold">
+                    {intl.formatMessage(
+                      { id: "Room {roomIndex}" },
+                      { roomIndex: idx + 1 }
+                    )}
+                  </Body>
+                )}
+                <TableSectionHeader title={room.name} subtitle={duration} />
+                {room.roomFeatures
+                  ? room.roomFeatures.map((feature) => (
+                      <Row
+                        key={feature.code}
+                        label={feature.description}
+                        value={formatPrice(
+                          intl,
+                          feature.totalPrice,
+                          currencyCode
+                        )}
+                      />
+                    ))
+                  : null}
+                {room.bedDescription ? (
+                  <Row
+                    label={room.bedDescription}
+                    value={formatPrice(intl, 0, currencyCode)}
+                  />
+                ) : null}
+                <Row
+                  bold
+                  label={intl.formatMessage({ id: "Room charge" })}
+                  value={formatPrice(intl, room.roomPrice, currencyCode)}
+                />
+              </TableSection>
+
+              {room.breakfast ? (
+                <TableSection>
+                  <Row
+                    label={intl.formatMessage(
+                      {
+                        id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
+                      },
+                      { totalAdults: room.adults, totalBreakfasts: diff }
+                    )}
+                    value={formatPrice(
+                      intl,
+                      room.breakfast.unitPrice * room.adults,
+                      currencyCode
+                    )}
+                  />
+                  {room.children ? (
+                    <Row
+                      label={intl.formatMessage(
+                        {
+                          id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
+                        },
+                        {
+                          totalChildren: room.children,
+                          totalBreakfasts: diff,
+                        }
+                      )}
+                      value={formatPrice(intl, 0, currencyCode)}
+                    />
+                  ) : null}
+                  <Row
+                    bold
+                    label={intl.formatMessage({
+                      id: "Breakfast charge",
+                    })}
+                    value={formatPrice(
+                      intl,
+                      room.breakfast.totalPrice * room.adults,
+                      currencyCode
+                    )}
+                  />
+                </TableSection>
+              ) : null}
+            </React.Fragment>
+          ) : null
+        })}
+        <TableSection>
+          <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
+          <Row
+            label={intl.formatMessage({ id: "Price excluding VAT" })}
+            value={formatPrice(intl, bookingTotal.priceExVat, currencyCode)}
+          />
+          <Row
+            label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
+            value={formatPrice(intl, bookingTotal.vatAmount, currencyCode)}
+          />
+          <tr className={styles.row}>
+            <td>
+              <Body textTransform="bold">
+                {intl.formatMessage({ id: "Price including VAT" })}
+              </Body>
+            </td>
+            <td className={styles.price}>
+              <Body textTransform="bold">
+                {formatPrice(intl, bookingTotal.price, currencyCode)}
+              </Body>
+            </td>
+          </tr>
+          {bookingCode && (
+            <tr className={styles.row}>
+              <td>
+                <PriceTagIcon />
+                {bookingCode}
+              </td>
+              <td></td>
+            </tr>
+          )}
+        </TableSection>
+      </table>
+    </Modal>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/priceDetailsModal.module.css
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/priceDetailsModal.module.css
@@ -0,0 +1,36 @@
+.priceDetailsTable {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.price {
+  text-align: end;
+}
+
+.tableSection {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  flex-direction: column;
+  width: 100%;
+}
+
+.tableSection:has(tr > th) {
+  padding-top: var(--Spacing-x2);
+}
+
+.tableSection:has(tr > th):not(:first-of-type) {
+  border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.tableSection:not(:last-child) {
+  padding-bottom: var(--Spacing-x2);
+}
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+@media screen and (min-width: 768px) {
+  .priceDetailsTable {
+    min-width: 512px;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
@@ -2,7 +2,7 @@

 import { useIntl } from "react-intl"

-import { CancellationRuleEnum } from "@/constants/booking"
+import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
@@ -23,14 +23,23 @@ export default function ReceiptRoom({
  roomIndex,
 }: BookingConfirmationReceiptRoomProps) {
  const intl = useIntl()
-  const room = useBookingConfirmationStore((state) => state.rooms[roomIndex])
-  const currencyCode = useBookingConfirmationStore(
-    (state) => state.currencyCode
-  )
+  const { room, currencyCode } = useBookingConfirmationStore((state) => ({
+    room: state.rooms[roomIndex],
+    currencyCode: state.currencyCode,
+  }))

  if (!room) {
    return <RoomSkeletonLoader />
  }
+
+  const childBedCrib = room.childBedPreferences.find(
+    (c) => c.bedType === ChildBedTypeEnum.Crib
+  )
+
+  const childBedExtraBed = room.childBedPreferences.find(
+    (c) => c.bedType === ChildBedTypeEnum.ExtraBed
+  )
+
  return (
    <article className={styles.room}>
      <header className={styles.roomHeader}>
@@ -99,23 +108,71 @@ export default function ReceiptRoom({
          </div>
        </Modal>
      </header>
+      {room.roomFeatures
+        ? room.roomFeatures.map((feature) => (
+            <div className={styles.entry} key={feature.code}>
+              <div>
+                <Body color="uiTextHighContrast">{feature.description}</Body>
+              </div>
+
+              <Body color="uiTextHighContrast">
+                {formatPrice(intl, feature.totalPrice, feature.currency)}
+              </Body>
+            </div>
+          ))
+        : null}
      <div className={styles.entry}>
        <Body color="uiTextHighContrast">{room.bedDescription}</Body>
        <Body color="uiTextHighContrast">
          {formatPrice(intl, 0, currencyCode)}
        </Body>
      </div>
+      {childBedCrib ? (
+        <div className={styles.entry}>
+          <div>
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage(
+                { id: "Crib (child) × {count}" },
+                { count: childBedCrib.quantity }
+              )}
+            </Body>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Based on availability" })}
+            </Caption>
+          </div>
+          <Body color="uiTextHighContrast">
+            {formatPrice(intl, 0, currencyCode)}
+          </Body>
+        </div>
+      ) : null}
+      {childBedExtraBed ? (
+        <div className={styles.entry}>
+          <div>
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage(
+                { id: "Extra bed (child) × {count}" },
+                {
+                  count: childBedExtraBed.quantity,
+                }
+              )}
+            </Body>
+          </div>
+          <Body color="uiTextHighContrast">
+            {formatPrice(intl, 0, currencyCode)}
+          </Body>
+        </div>
+      ) : null}
      <div className={styles.entry}>
        <Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
        {(room.rateDefinition.breakfastIncluded ?? room.breakfastIncluded) ? (
          <Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
        ) : null}
-        {room.selectedBreakfast ? (
+        {room.breakfast ? (
          <Body color="uiTextHighContrast">
            {formatPrice(
              intl,
-              room.selectedBreakfast.totalPrice,
-              room.selectedBreakfast.currency
+              room.breakfast.totalPrice * room.adults,
+              room.breakfast.currency
            )}
          </Body>
        ) : null}
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
@@ -4,21 +4,22 @@ import { useIntl } from "react-intl"

 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

-import { ChevronRightSmallIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { formatPrice } from "@/utils/numberFormatting"

+import PriceDetailsModal from "../../PriceDetailsModal"
+
 import styles from "./totalPrice.module.css"

 export default function TotalPrice() {
  const intl = useIntl()
-  const rooms = useBookingConfirmationStore((state) => state.rooms)
-  const currencyCode = useBookingConfirmationStore(
-    (state) => state.currencyCode
-  )
+  const { rooms, currencyCode } = useBookingConfirmationStore((state) => ({
+    rooms: state.rooms,
+    currencyCode: state.currencyCode,
+  }))
+
  const hasAllRoomsLoaded = rooms.every((room) => room)
  const grandTotal = rooms.reduce((acc, room) => {
    const reservationTotalPrice = room?.totalPrice || 0
@@ -42,19 +43,7 @@ export default function TotalPrice() {
          )}
        </div>
        {hasAllRoomsLoaded ? (
-          <div className={styles.entry}>
-            <Button
-              className={styles.btn}
-              intent="text"
-              size="small"
-              theme="base"
-              variant="icon"
-              wrapping
-            >
-              {intl.formatMessage({ id: "Price details" })}
-              <ChevronRightSmallIcon />
-            </Button>
-          </div>
+          <PriceDetailsModal />
        ) : (
          <div className={styles.priceDetailsLoader}>
            <SkeletonShimmer width={"100%"} />
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
@@ -114,12 +114,16 @@ export default async function BookingConfirmation({

  return (
    <BookingConfirmationProvider
+      bookingCode={booking.bookingCode}
      currencyCode={booking.currencyCode}
+      fromDate={booking.checkInDate}
+      toDate={booking.checkOutDate}
      rooms={[
        mapRoomState(booking, room),
        // null represents "known but not yet fetched rooms" and is used to render placeholders correctly
        ...Array(booking.linkedReservations.length).fill(null),
      ]}
+      vat={booking.vatPercentage}
    >
      <Confirmation booking={booking} hotel={hotel} room={room}>
        <div className={styles.booking}>
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
@@ -6,24 +6,29 @@ export function mapRoomState(
  booking: BookingConfirmationSchema,
  room: BookingConfirmationRoom
 ) {
-  const selectedBreakfast = booking.packages.find(
+  const breakfast = booking.packages.find(
    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
  )
  const breakfastIncluded = booking.packages.some(
    (pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
  )
+
  return {
    adults: booking.adults,
    bedDescription: room.bedType.description,
+    breakfast,
    breakfastIncluded,
    children: booking.childrenAges.length,
+    childBedPreferences: booking.childBedPreferences,
    confirmationNumber: booking.confirmationNumber,
    fromDate: booking.checkInDate,
    name: room.name,
    rateDefinition: booking.rateDefinition,
+    roomFeatures: booking.packages.filter((p) => p.type === "RoomFeature"),
    roomPrice: booking.roomPrice,
-    selectedBreakfast,
    toDate: booking.checkOutDate,
    totalPrice: booking.totalPrice,
+    totalPriceExVat: booking.totalPriceExVat,
+    vatAmount: booking.vatAmount,
  }
 }