From 540402b9691e110299facdccdd00e718dee6bb60 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Fri, 14 Mar 2025 13:49:22 +0000
Subject: [PATCH] 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
---
 .../__mocks__/hotelReservation/index.ts       |   2 +-
 .../PaymentDetails/index.tsx                  |  22 +-
 .../PriceDetailsModal/index.tsx               | 233 ++++++++++++++++++
 .../priceDetailsModal.module.css              |  36 +++
 .../Receipt/Room/index.tsx                    |  73 +++++-
 .../Receipt/TotalPrice/index.tsx              |  27 +-
 .../BookingConfirmation/index.tsx             |   4 +
 .../BookingConfirmation/utils.ts              |   9 +-
 .../EnterDetails/Breakfast/index.tsx          |   2 +-
 .../PriceDetailsTable/index.tsx               |  12 +-
 .../PriceDetailsModal/index.tsx               |   2 +-
 .../providers/BookingConfirmationProvider.tsx |  13 +-
 .../server/routers/booking/output.ts          |   2 +-
 .../stores/booking-confirmation/index.ts      |   4 +
 .../scandic-web/stores/enter-details/index.ts |   2 +-
 .../{enterDetails => }/breakfast.ts           |   0
 .../types/contexts/details/room.ts            |   2 +-
 .../types/providers/booking-confirmation.ts   |   4 +
 .../types/providers/enter-details.ts          |   2 +-
 .../types/stores/booking-confirmation.ts      |  20 +-
 .../scandic-web/types/stores/enter-details.ts |   8 +-
 21 files changed, 414 insertions(+), 65 deletions(-)
 create mode 100644 apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
 create mode 100644 apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/priceDetailsModal.module.css
 rename apps/scandic-web/types/components/hotelReservation/{enterDetails => }/breakfast.ts (100%)

diff --git a/apps/scandic-web/__mocks__/hotelReservation/index.ts b/apps/scandic-web/__mocks__/hotelReservation/index.ts
index 44249401d..b86ddb470 100644
--- a/apps/scandic-web/__mocks__/hotelReservation/index.ts
+++ b/apps/scandic-web/__mocks__/hotelReservation/index.ts
@@ -1,8 +1,8 @@
 import { BedTypeEnum } from "@/constants/booking"
 
 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
 import type { BedTypeSelection } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
 import type {
   DetailsSchema,
   RoomPrice,
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
index ff355a487..2210613bf 100644
--- 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>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
new file mode 100644
index 000000000..85dbbf475
--- /dev/null
+++ 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>
+  )
+}
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/priceDetailsModal.module.css b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/priceDetailsModal.module.css
new file mode 100644
index 000000000..284e9ac5a
--- /dev/null
+++ 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;
+  }
+}
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
index 0cfefdf8b..35735f791 100644
--- 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}
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
index 806e35870..59f614d94 100644
--- 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%"} />
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
index c892c0453..340a6c821 100644
--- 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}>
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
index 436f9ce59..8b3826610 100644
--- 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,
   }
 }
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx
index 4ae2d914c..712aac448 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -15,7 +15,7 @@ import { breakfastFormSchema } from "./schema"
 
 import styles from "./breakfast.module.css"
 
-import type { BreakfastFormSchema } from "@/types/components/hotelReservation/enterDetails/breakfast"
+import type { BreakfastFormSchema } from "@/types/components/hotelReservation/breakfast"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 
 export default function Breakfast() {
diff --git a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx
index 7882d029f..bfc5d7024 100644
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
@@ -13,8 +13,8 @@ import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./priceDetailsTable.module.css"
 
+import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
 import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
 import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details"
 import type { Price } from "@/types/components/hotelReservation/price"
 import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
@@ -106,7 +106,7 @@ export default function PriceDetailsTable({
   return (
     <table className={styles.priceDetailsTable}>
       {rooms.map((room, idx) => (
-        <React.Fragment key={idx}>
+        <Fragment key={idx}>
           <TableSection>
             {rooms.length > 1 && (
               <Body textTransform="bold">
@@ -134,8 +134,8 @@ export default function PriceDetailsTable({
                     label={feature.description}
                     value={formatPrice(
                       intl,
-                      0,
-                      room.roomPrice.perStay.local.currency
+                      parseInt(feature.localPrice.price),
+                      feature.localPrice.currency
                     )}
                   />
                 ))
@@ -209,7 +209,7 @@ export default function PriceDetailsTable({
               />
             </TableSection>
           ) : null}
-        </React.Fragment>
+        </Fragment>
       ))}
       <TableSection>
         <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
diff --git a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx
index 1b4019810..d99817f35 100644
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx
@@ -8,8 +8,8 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import PriceDetailsTable from "./PriceDetailsTable"
 
+import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
 import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
 import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details"
 import type { Price } from "@/types/components/hotelReservation/price"
 import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
diff --git a/apps/scandic-web/providers/BookingConfirmationProvider.tsx b/apps/scandic-web/providers/BookingConfirmationProvider.tsx
index 4aa89e382..ced2145ca 100644
--- a/apps/scandic-web/providers/BookingConfirmationProvider.tsx
+++ b/apps/scandic-web/providers/BookingConfirmationProvider.tsx
@@ -10,14 +10,25 @@ import type { BookingConfirmationStore } from "@/types/contexts/booking-confirma
 import type { BookingConfirmationProviderProps } from "@/types/providers/booking-confirmation"
 
 export default function BookingConfirmationProvider({
+  bookingCode,
   children,
   currencyCode,
+  fromDate,
+  toDate,
   rooms,
+  vat,
 }: BookingConfirmationProviderProps) {
   const storeRef = useRef<BookingConfirmationStore>()
 
   if (!storeRef.current) {
-    const initialData = { rooms, currencyCode }
+    const initialData = {
+      bookingCode,
+      currencyCode,
+      fromDate,
+      toDate,
+      rooms,
+      vat,
+    }
     storeRef.current = createBookingConfirmationStore(initialData)
   }
 
diff --git a/apps/scandic-web/server/routers/booking/output.ts b/apps/scandic-web/server/routers/booking/output.ts
index 36568c95c..5f6b4c3d2 100644
--- a/apps/scandic-web/server/routers/booking/output.ts
+++ b/apps/scandic-web/server/routers/booking/output.ts
@@ -85,7 +85,7 @@ export type Guest = z.output<typeof guestSchema>
 export const packageSchema = z
   .object({
     type: z.string().nullable(),
-    description: z.string().nullable().default(""),
+    description: nullableStringValidator,
     code: z.string().nullable().default(""),
     price: z.object({
       unit: z.number().int().nullable(),
diff --git a/apps/scandic-web/stores/booking-confirmation/index.ts b/apps/scandic-web/stores/booking-confirmation/index.ts
index 1ee64bc33..6f47cdfc8 100644
--- a/apps/scandic-web/stores/booking-confirmation/index.ts
+++ b/apps/scandic-web/stores/booking-confirmation/index.ts
@@ -11,7 +11,11 @@ import type {
 export function createBookingConfirmationStore(initialState: InitialState) {
   return create<BookingConfirmationState>()((set) => ({
     rooms: initialState.rooms,
+    bookingCode: initialState.bookingCode,
     currencyCode: initialState.currencyCode,
+    fromDate: initialState.fromDate,
+    toDate: initialState.toDate,
+    vat: initialState.vat,
     actions: {
       setRoom: (room, idx) => {
         set((state) => {
diff --git a/apps/scandic-web/stores/enter-details/index.ts b/apps/scandic-web/stores/enter-details/index.ts
index 0e7e695ba..f15e4879c 100644
--- a/apps/scandic-web/stores/enter-details/index.ts
+++ b/apps/scandic-web/stores/enter-details/index.ts
@@ -19,7 +19,7 @@ import {
   writeToSessionStorage,
 } from "./helpers"
 
-import type { BreakfastPackages } from "@/types/components/hotelReservation/enterDetails/breakfast"
+import type { BreakfastPackages } from "@/types/components/hotelReservation/breakfast"
 import { StepEnum } from "@/types/enums/step"
 import type {
   DetailsState,
diff --git a/apps/scandic-web/types/components/hotelReservation/enterDetails/breakfast.ts b/apps/scandic-web/types/components/hotelReservation/breakfast.ts
similarity index 100%
rename from apps/scandic-web/types/components/hotelReservation/enterDetails/breakfast.ts
rename to apps/scandic-web/types/components/hotelReservation/breakfast.ts
diff --git a/apps/scandic-web/types/contexts/details/room.ts b/apps/scandic-web/types/contexts/details/room.ts
index f58d6bbe2..04685a3f3 100644
--- a/apps/scandic-web/types/contexts/details/room.ts
+++ b/apps/scandic-web/types/contexts/details/room.ts
@@ -1,5 +1,5 @@
+import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
 import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
 import type { DetailsSchema } from "@/types/components/hotelReservation/enterDetails/details"
 import type { StepEnum } from "@/types/enums/step"
 import type { RoomState } from "@/types/stores/enter-details"
diff --git a/apps/scandic-web/types/providers/booking-confirmation.ts b/apps/scandic-web/types/providers/booking-confirmation.ts
index 796a9ddde..12be63a61 100644
--- a/apps/scandic-web/types/providers/booking-confirmation.ts
+++ b/apps/scandic-web/types/providers/booking-confirmation.ts
@@ -2,6 +2,10 @@ import type { Room } from "../stores/booking-confirmation"
 
 export interface BookingConfirmationProviderProps
   extends React.PropsWithChildren {
+  bookingCode: string | null
   currencyCode: string
+  fromDate: Date
   rooms: (Room | null)[]
+  toDate: Date
+  vat: number
 }
diff --git a/apps/scandic-web/types/providers/enter-details.ts b/apps/scandic-web/types/providers/enter-details.ts
index a6430cd11..1fe4c3fa4 100644
--- a/apps/scandic-web/types/providers/enter-details.ts
+++ b/apps/scandic-web/types/providers/enter-details.ts
@@ -1,6 +1,6 @@
 import type { Room } from "@/types/providers/details/room"
 import type { SafeUser } from "@/types/user"
-import type { BreakfastPackages } from "../components/hotelReservation/enterDetails/breakfast"
+import type { BreakfastPackages } from "../components/hotelReservation/breakfast"
 import type { SelectRateSearchParams } from "../components/hotelReservation/selectRate/selectRate"
 
 export interface DetailsProviderProps extends React.PropsWithChildren {
diff --git a/apps/scandic-web/types/stores/booking-confirmation.ts b/apps/scandic-web/types/stores/booking-confirmation.ts
index 0a2917e21..75ee07585 100644
--- a/apps/scandic-web/types/stores/booking-confirmation.ts
+++ b/apps/scandic-web/types/stores/booking-confirmation.ts
@@ -1,30 +1,48 @@
+import type { ChildBedTypeEnum } from "@/constants/booking"
 import type {
   BookingConfirmation,
   PackageSchema,
 } from "../trpc/routers/booking/confirmation"
 
+export interface ChildBedPreference {
+  quantity: number
+  bedType: ChildBedTypeEnum
+}
+
 export interface Room {
   adults: number
   bedDescription: string
+  breakfast?: PackageSchema
   breakfastIncluded: boolean
   children?: number
+  childBedPreferences: ChildBedPreference[]
   confirmationNumber: string
   fromDate: Date
   name: string
   rateDefinition: BookingConfirmation["booking"]["rateDefinition"]
+  roomFeatures?: PackageSchema[] | null
   roomPrice: number
-  selectedBreakfast?: PackageSchema
   toDate: Date
   totalPrice: number
+  totalPriceExVat: number
+  vatAmount: number
 }
 
 export interface InitialState {
+  bookingCode: string | null
+  fromDate: Date
   rooms: (Room | null)[]
+  toDate: Date
   currencyCode: string
+  vat: number
 }
 
 export interface BookingConfirmationState {
+  bookingCode: string | null
   rooms: (Room | null)[]
   currencyCode: string
+  vat: number
+  fromDate: Date
+  toDate: Date
   actions: { setRoom: (room: Room, idx: number) => void }
 }
diff --git a/apps/scandic-web/types/stores/enter-details.ts b/apps/scandic-web/types/stores/enter-details.ts
index 882092848..ca0b21b6c 100644
--- a/apps/scandic-web/types/stores/enter-details.ts
+++ b/apps/scandic-web/types/stores/enter-details.ts
@@ -1,11 +1,11 @@
+import type {
+  BreakfastPackage,
+  BreakfastPackages,
+} from "@/types/components/hotelReservation/breakfast"
 import type {
   BedTypeSchema,
   BedTypeSelection,
 } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type {
-  BreakfastPackage,
-  BreakfastPackages,
-} from "@/types/components/hotelReservation/enterDetails/breakfast"
 import type {
   DetailsSchema,
   MultiroomDetailsSchema,