fix: unite all price details modals to one and align on ui

2025-04-15 15:04:11 +02:00
parent 8152aea649
commit 1f94c581ae
54 changed files with 1926 additions and 746 deletions
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Breakfast.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Breakfast.tsx
@@ -0,0 +1,117 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { formatPrice } from "@/utils/numberFormatting"
+
+import BoldRow from "./Row/Bold"
+import RegularRow from "./Row/Regular"
+import Tbody from "./Tbody"
+
+import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
+import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+
+interface BreakfastProps {
+  adults: number
+  breakfast: BreakfastPackage | false | undefined | null
+  breakfastIncluded: boolean
+  childrenInRoom: Child[] | undefined
+  currency: string
+  nights: number
+}
+
+export default function Breakfast({
+  adults,
+  breakfast,
+  breakfastIncluded,
+  childrenInRoom,
+  currency,
+  nights,
+}: BreakfastProps) {
+  const intl = useIntl()
+
+  if (breakfastIncluded) {
+    const included = intl.formatMessage({ defaultMessage: "Included" })
+    return (
+      <Tbody border>
+        <RegularRow
+          label={intl.formatMessage(
+            {
+              defaultMessage:
+                "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
+            },
+            { totalAdults: adults, totalBreakfasts: nights }
+          )}
+          value={included}
+        />
+        {childrenInRoom?.length ? (
+          <RegularRow
+            label={intl.formatMessage(
+              {
+                defaultMessage:
+                  "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
+              },
+              {
+                totalChildren: childrenInRoom.length,
+                totalBreakfasts: nights,
+              }
+            )}
+            value={included}
+          />
+        ) : null}
+        <BoldRow
+          label={intl.formatMessage({ defaultMessage: "Breakfast charge" })}
+          value={formatPrice(intl, 0, currency)}
+        />
+      </Tbody>
+    )
+  }
+
+  if (!breakfast) {
+    return null
+  }
+
+  const breakfastAdultsPricePerNight = formatPrice(
+    intl,
+    breakfast.localPrice.price * adults,
+    breakfast.localPrice.currency
+  )
+  const breakfastAdultsTotalPrice = formatPrice(
+    intl,
+    breakfast.localPrice.price * adults * nights,
+    breakfast.localPrice.currency
+  )
+
+  return (
+    <Tbody border>
+      <RegularRow
+        label={intl.formatMessage(
+          {
+            defaultMessage:
+              "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
+          },
+          { totalAdults: adults, totalBreakfasts: nights }
+        )}
+        value={breakfastAdultsPricePerNight}
+      />
+      {childrenInRoom?.length ? (
+        <RegularRow
+          label={intl.formatMessage(
+            {
+              defaultMessage:
+                "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
+            },
+            {
+              totalChildren: childrenInRoom.length,
+              totalBreakfasts: nights,
+            }
+          )}
+          value={formatPrice(intl, 0, breakfast.localPrice.currency)}
+        />
+      ) : null}
+      <BoldRow
+        label={intl.formatMessage({ defaultMessage: "Breakfast charge" })}
+        value={breakfastAdultsTotalPrice}
+      />
+    </Tbody>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Bold.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Bold.tsx
@@ -0,0 +1,25 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./row.module.css"
+
+interface RowProps {
+  label: string
+  value: string
+}
+
+export default function BoldRow({ label, value }: RowProps) {
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <span>{label}</span>
+        </Typography>
+      </td>
+      <td className={styles.price}>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <span>{value}</span>
+        </Typography>
+      </td>
+    </tr>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/BookingCode.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/BookingCode.tsx
@@ -0,0 +1,48 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import IconChip from "@/components/TempDesignSystem/IconChip"
+
+import styles from "./row.module.css"
+
+interface BookingCodeRowProps {
+  bookingCode?: string
+}
+
+export default function BookingCodeRow({ bookingCode }: BookingCodeRowProps) {
+  const intl = useIntl()
+
+  if (!bookingCode) {
+    return null
+  }
+
+  const text = intl.formatMessage(
+    { defaultMessage: "<strong>Booking code</strong>: {value}" },
+    {
+      value: bookingCode,
+      strong: (text) => (
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <strong>{text}</strong>
+        </Typography>
+      ),
+    }
+  )
+
+  return (
+    <tr className={styles.row}>
+      <td colSpan={2} align="left">
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <IconChip
+            color="blue"
+            icon={<DiscountIcon color="Icon/Feedback/Information" />}
+          >
+            {text}
+          </IconChip>
+        </Typography>
+      </td>
+    </tr>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/DiscountedRegularPrice.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/DiscountedRegularPrice.tsx
@@ -0,0 +1,51 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./row.module.css"
+
+import type { CurrencyEnum } from "@/types/enums/currency"
+import type { Package } from "@/types/requests/packages"
+
+interface DiscountedRegularPriceRowProps {
+  currency: CurrencyEnum
+  packages: Package[]
+  regularPrice?: number
+}
+
+export default function DiscountedRegularPriceRow({
+  currency,
+  packages,
+  regularPrice,
+}: DiscountedRegularPriceRowProps) {
+  const intl = useIntl()
+
+  if (!regularPrice) {
+    return null
+  }
+
+  const totalPackagesPrice = packages.reduce(
+    (total, pkg) => total + pkg.localPrice.totalPrice,
+    0
+  )
+
+  const price = formatPrice(intl, regularPrice + totalPackagesPrice, currency)
+
+  return (
+    <tr className={styles.row}>
+      <td></td>
+      <td className={styles.price}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span>
+            <s>{price}</s>
+          </span>
+        </Typography>
+        <Caption color="uiTextMediumContrast" striked></Caption>
+      </td>
+    </tr>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Header.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Header.tsx
@@ -0,0 +1,29 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+interface TrProps {
+  subtitle?: string
+  title: string
+}
+
+export default function HeaderRow({ subtitle, title }: TrProps) {
+  return (
+    <>
+      <tr>
+        <th colSpan={2}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <span>{title}</span>
+          </Typography>
+        </th>
+      </tr>
+      {subtitle ? (
+        <tr>
+          <th colSpan={2}>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span>{subtitle}</span>
+            </Typography>
+          </th>
+        </tr>
+      ) : null}
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Large.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Large.tsx
@@ -0,0 +1,25 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./row.module.css"
+
+interface RowProps {
+  label: string
+  value: string
+}
+
+export default function LargeRow({ label, value }: RowProps) {
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Typography variant="Body/Paragraph/mdBold">
+          <span>{label}</span>
+        </Typography>
+      </td>
+      <td className={styles.price}>
+        <Typography variant="Body/Paragraph/mdBold">
+          <span>{value}</span>
+        </Typography>
+      </td>
+    </tr>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/BedType.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/BedType.tsx
@@ -0,0 +1,31 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { formatPrice } from "@/utils/numberFormatting"
+
+import RegularRow from "../Regular"
+
+import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
+
+interface BedTypeRowProps {
+  bedType: BedTypeSchema | undefined
+  currency?: string
+}
+
+export default function BedTypeRow({
+  bedType,
+  currency = "",
+}: BedTypeRowProps) {
+  const intl = useIntl()
+
+  if (!bedType) {
+    return null
+  }
+
+  return (
+    <RegularRow
+      label={bedType.description}
+      value={formatPrice(intl, 0, currency)}
+    />
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/CorporateCheque.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/CorporateCheque.tsx
@@ -0,0 +1,83 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { sumPackages } from "@/components/HotelReservation/utils"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import BoldRow from "../Bold"
+import RegularRow from "../Regular"
+import BedTypeRow from "./BedType"
+import PackagesRow from "./Packages"
+
+import { CurrencyEnum } from "@/types/enums/currency"
+import type { SharedPriceRowProps } from "./price"
+
+export interface CorporateChequePriceType {
+  corporateCheque?: {
+    additionalPricePerStay?: number
+    currency?: CurrencyEnum
+    numberOfCheques: number
+  }
+}
+
+interface CorporateChequePriceProps extends SharedPriceRowProps {
+  currency: string
+  nights: number
+  price: CorporateChequePriceType["corporateCheque"]
+}
+
+export default function CorporateChequePrice({
+  bedType,
+  currency,
+  nights,
+  packages,
+  price,
+}: CorporateChequePriceProps) {
+  const intl = useIntl()
+
+  if (!price) {
+    return null
+  }
+
+  const averagePriceTitle = intl.formatMessage({
+    defaultMessage: "Average price per night",
+  })
+
+  const pkgsSum = sumPackages(packages)
+  const roomAdditionalPrice = price.additionalPricePerStay
+  let additionalPricePerStay
+  if (roomAdditionalPrice) {
+    additionalPricePerStay = roomAdditionalPrice + pkgsSum.price
+  } else if (pkgsSum.price) {
+    additionalPricePerStay = pkgsSum.price
+  }
+
+  const averageChequesPerNight = price.numberOfCheques / nights
+  const averageAdditionalPricePerNight = roomAdditionalPrice
+    ? Math.ceil(roomAdditionalPrice / nights)
+    : null
+
+  const additionalCurrency = price.currency ?? pkgsSum.currency
+  let averagePricePerNight = `${averageChequesPerNight} ${CurrencyEnum.CC}`
+  if (averageAdditionalPricePerNight) {
+    averagePricePerNight = `${averagePricePerNight} + ${averageAdditionalPricePerNight} ${additionalCurrency}`
+  }
+
+  return (
+    <>
+      <RegularRow label={averagePriceTitle} value={averagePricePerNight} />
+      <BedTypeRow bedType={bedType} currency={currency} />
+      <PackagesRow packages={packages} />
+      <BoldRow
+        label={intl.formatMessage({ defaultMessage: "Room charge" })}
+        value={formatPrice(
+          intl,
+          price.numberOfCheques,
+          CurrencyEnum.CC,
+          additionalPricePerStay,
+          additionalCurrency
+        )}
+      />
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Packages.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Packages.tsx
@@ -0,0 +1,32 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { formatPrice } from "@/utils/numberFormatting"
+
+import RegularRow from "../Regular"
+
+import type { Packages as PackagesType } from "@/types/requests/packages"
+
+interface PackagesProps {
+  packages: PackagesType | null
+}
+
+export default function PackagesRow({ packages }: PackagesProps) {
+  const intl = useIntl()
+
+  if (!packages || !packages.length) {
+    return null
+  }
+
+  return packages?.map((pkg) => (
+    <RegularRow
+      key={pkg.code}
+      label={pkg.description}
+      value={formatPrice(
+        intl,
+        +pkg.localPrice.totalPrice,
+        pkg.localPrice.currency
+      )}
+    />
+  ))
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Redemption.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Redemption.tsx
@@ -0,0 +1,83 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { sumPackages } from "@/components/HotelReservation/utils"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import BoldRow from "../Bold"
+import RegularRow from "../Regular"
+import BedTypeRow from "./BedType"
+import PackagesRow from "./Packages"
+
+import { CurrencyEnum } from "@/types/enums/currency"
+import type { SharedPriceRowProps } from "./price"
+
+export interface RedemptionPriceType {
+  redemption?: {
+    additionalPricePerStay?: number
+    currency?: CurrencyEnum
+    pointsPerNight: number
+    pointsPerStay: number
+  }
+}
+
+interface RedemptionPriceProps extends SharedPriceRowProps {
+  currency: string
+  nights: number
+  price: RedemptionPriceType["redemption"]
+}
+
+export default function RedemptionPrice({
+  bedType,
+  currency,
+  nights,
+  packages,
+  price,
+}: RedemptionPriceProps) {
+  const intl = useIntl()
+
+  if (!price) {
+    return null
+  }
+
+  const averagePriceTitle = intl.formatMessage({
+    defaultMessage: "Average price per night",
+  })
+  const pkgsSum = sumPackages(packages)
+
+  const roomAdditionalPrice = price.additionalPricePerStay
+  let additionalPricePerStay
+  if (roomAdditionalPrice) {
+    additionalPricePerStay = roomAdditionalPrice + pkgsSum.price
+  } else if (pkgsSum.price) {
+    additionalPricePerStay = pkgsSum.price
+  }
+
+  const averageAdditionalPricePerNight = roomAdditionalPrice
+    ? Math.ceil(roomAdditionalPrice / nights)
+    : null
+
+  const additionalCurrency = price.currency ?? pkgsSum.currency
+  let averagePricePerNight = `${price.pointsPerNight} ${CurrencyEnum.POINTS}`
+  if (averageAdditionalPricePerNight) {
+    averagePricePerNight = `${averagePricePerNight} + ${averageAdditionalPricePerNight} ${additionalCurrency}`
+  }
+
+  return (
+    <>
+      <RegularRow label={averagePriceTitle} value={averagePricePerNight} />
+      <BedTypeRow bedType={bedType} currency={currency} />
+      <PackagesRow packages={packages} />
+      <BoldRow
+        label={intl.formatMessage({ defaultMessage: "Room charge" })}
+        value={formatPrice(
+          intl,
+          price.pointsPerStay,
+          CurrencyEnum.POINTS,
+          additionalPricePerStay,
+          additionalCurrency
+        )}
+      />
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx
@@ -0,0 +1,67 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { sumPackages } from "@/components/HotelReservation/utils"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import BoldRow from "../Bold"
+import RegularRow from "../Regular"
+import BedTypeRow from "./BedType"
+import PackagesRow from "./Packages"
+
+import type { CurrencyEnum } from "@/types/enums/currency"
+import type { SharedPriceRowProps } from "./price"
+
+export interface RegularPriceType {
+  regular?: {
+    currency: CurrencyEnum
+    pricePerNight: number
+    pricePerStay: number
+  }
+}
+
+interface RegularPriceProps extends SharedPriceRowProps {
+  price: RegularPriceType["regular"]
+}
+
+export default function RegularPrice({
+  bedType,
+  packages,
+  price,
+}: RegularPriceProps) {
+  const intl = useIntl()
+
+  if (!price) {
+    return null
+  }
+
+  const averagePriceTitle = intl.formatMessage({
+    defaultMessage: "Average price per night",
+  })
+
+  const avgeragePricePerNight = formatPrice(
+    intl,
+    price.pricePerNight,
+    price.currency
+  )
+
+  const pkgs = sumPackages(packages)
+
+  const roomCharge = formatPrice(
+    intl,
+    price.pricePerStay + pkgs.price,
+    price.currency
+  )
+
+  return (
+    <>
+      <RegularRow label={averagePriceTitle} value={avgeragePricePerNight} />
+      <BedTypeRow bedType={bedType} currency={price.currency} />
+      <PackagesRow packages={packages} />
+      <BoldRow
+        label={intl.formatMessage({ defaultMessage: "Room charge" })}
+        value={roomCharge}
+      />
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Voucher.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Voucher.tsx
@@ -0,0 +1,76 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { sumPackages } from "@/components/HotelReservation/utils"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import BoldRow from "../Bold"
+import RegularRow from "../Regular"
+import BedTypeRow from "./BedType"
+import PackagesRow from "./Packages"
+
+import { CurrencyEnum } from "@/types/enums/currency"
+import type { SharedPriceRowProps } from "./price"
+
+export interface VoucherPriceType {
+  voucher?: {
+    numberOfVouchers: number
+  }
+}
+
+interface VoucherPriceProps extends SharedPriceRowProps {
+  currency: string
+  nights: number
+  price: VoucherPriceType["voucher"]
+}
+
+export default function VoucherPrice({
+  bedType,
+  currency,
+  nights,
+  packages,
+  price,
+}: VoucherPriceProps) {
+  const intl = useIntl()
+
+  if (!price) {
+    return null
+  }
+
+  const averagePriceTitle = intl.formatMessage({
+    defaultMessage: "Average price per night",
+  })
+  const pkgsSum = sumPackages(packages)
+
+  let additionalPricePerStay
+  if (pkgsSum.price) {
+    additionalPricePerStay = pkgsSum.price
+  }
+
+  const averageAdditionalPricePerNight = additionalPricePerStay
+    ? Math.ceil(additionalPricePerStay / nights)
+    : null
+
+  let averagePricePerNight = `${price.numberOfVouchers} ${CurrencyEnum.Voucher}`
+  if (averageAdditionalPricePerNight) {
+    averagePricePerNight = `${averagePricePerNight} + ${averageAdditionalPricePerNight} ${pkgsSum.currency}`
+  }
+
+  return (
+    <>
+      <RegularRow label={averagePriceTitle} value={averagePricePerNight} />
+      <BedTypeRow bedType={bedType} currency={currency} />
+      <PackagesRow packages={packages} />
+      <BoldRow
+        label={intl.formatMessage({ defaultMessage: "Room charge" })}
+        value={formatPrice(
+          intl,
+          price.numberOfVouchers,
+          CurrencyEnum.Voucher,
+          additionalPricePerStay,
+          pkgsSum.currency
+        )}
+      />
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/price.ts
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/price.ts
@@ -0,0 +1,7 @@
+import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
+import type { Packages } from "@/types/requests/packages"
+
+export interface SharedPriceRowProps {
+  bedType: BedTypeSchema | undefined
+  packages: Packages | null
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Regular.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Regular.tsx
@@ -0,0 +1,25 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./row.module.css"
+
+interface RowProps {
+  label: string
+  value: string
+}
+
+export default function RegularRow({ label, value }: RowProps) {
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span>{label}</span>
+        </Typography>
+      </td>
+      <td className={styles.price}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span>{value}</span>
+        </Typography>
+      </td>
+    </tr>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Vat.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Vat.tsx
@@ -0,0 +1,46 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { formatPrice } from "@/utils/numberFormatting"
+
+import RegularRow from "./Regular"
+
+import type { Price } from "@/types/components/hotelReservation/price"
+import { CurrencyEnum } from "@/types/enums/currency"
+
+interface VatProps {
+  totalPrice: Price
+  vat: number
+}
+
+const noVatCurrencies = [
+  CurrencyEnum.CC,
+  CurrencyEnum.POINTS,
+  CurrencyEnum.Voucher,
+]
+
+export default function VatRow({ totalPrice, vat }: VatProps) {
+  const intl = useIntl()
+
+  if (noVatCurrencies.includes(totalPrice.local.currency)) {
+    return null
+  }
+
+  const vatPercentage = vat / 100
+  const vatAmount = totalPrice.local.price * vatPercentage
+
+  const priceExclVat = totalPrice.local.price - vatAmount
+
+  return (
+    <>
+      <RegularRow
+        label={intl.formatMessage({ defaultMessage: "Price excluding VAT" })}
+        value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
+      />
+      <RegularRow
+        label={intl.formatMessage({ defaultMessage: "VAT {vat}%" }, { vat })}
+        value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
+      />
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/row.module.css
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/row.module.css
@@ -0,0 +1,8 @@
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.price {
+  text-align: end;
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Tbody/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Tbody/index.tsx
@@ -0,0 +1,6 @@
+import { type TbodyProps,tbodyVariants } from "./variants"
+
+export default function Tbody({ border, children }: TbodyProps) {
+  const classNames = tbodyVariants({ border })
+  return <tbody className={classNames}>{children}</tbody>
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Tbody/tbody.module.css
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Tbody/tbody.module.css
@@ -0,0 +1,23 @@
+.tbody {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  flex-direction: column;
+  width: 100%;
+}
+
+.tbody:has(tr > th) {
+  padding-top: var(--Spacing-x2);
+}
+
+.tbody:has(tr > th):not(:first-of-type),
+.border {
+  border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.tbody:not(:last-child) {
+  padding-bottom: var(--Spacing-x2);
+}
+
+.border {
+  padding-top: var(--Spacing-x2);
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Tbody/variants.ts
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Tbody/variants.ts
@@ -0,0 +1,18 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import styles from "./tbody.module.css"
+
+import type { PropsWithChildren } from "react"
+
+export const tbodyVariants = cva(styles.tbody, {
+  variants: {
+    border: {
+      true: styles.border,
+    },
+  },
+  defaultVariants: {},
+})
+
+export interface TbodyProps
+  extends PropsWithChildren,
+    VariantProps<typeof tbodyVariants> {}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx
@@ -0,0 +1,214 @@
+"use client"
+import { Fragment } from "react"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { dt } from "@/lib/dt"
+
+import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import BookingCodeRow from "./Row/BookingCode"
+import DiscountedRegularPriceRow from "./Row/DiscountedRegularPrice"
+import HeaderRow from "./Row/Header"
+import LargeRow from "./Row/Large"
+import CorporateChequePrice, {
+  type CorporateChequePriceType,
+} from "./Row/Price/CorporateCheque"
+import RedemptionPrice, {
+  type RedemptionPriceType,
+} from "./Row/Price/Redemption"
+import RegularPrice, { type RegularPriceType } from "./Row/Price/Regular"
+import VoucherPrice, { type VoucherPriceType } from "./Row/Price/Voucher"
+import VatRow from "./Row/Vat"
+import Breakfast from "./Breakfast"
+import Tbody from "./Tbody"
+
+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 { Price } from "@/types/components/hotelReservation/price"
+import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { Package, Packages } from "@/types/requests/packages"
+
+type RoomPrice =
+  | CorporateChequePriceType
+  | RegularPriceType
+  | RedemptionPriceType
+  | VoucherPriceType
+
+export interface Room {
+  adults: number
+  bedType: BedTypeSchema | undefined
+  breakfast: BreakfastPackage | false | undefined | null
+  breakfastIncluded: boolean
+  childrenInRoom: Child[] | undefined
+  packages: Packages | null
+  price: RoomPrice
+  roomType: string
+}
+
+export interface PriceDetailsTableProps {
+  bookingCode?: string
+  fromDate: string
+  rooms: Room[]
+  toDate: string
+  totalPrice: Price
+  vat: number
+}
+
+export default function PriceDetailsTable({
+  bookingCode,
+  fromDate,
+  rooms,
+  toDate,
+  totalPrice,
+  vat,
+}: PriceDetailsTableProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const diff = dt(toDate).diff(fromDate, "days")
+  const nights = intl.formatMessage(
+    { defaultMessage: "{totalNights, plural, one {# night} other {# nights}}" },
+    { totalNights: diff }
+  )
+
+  const arrival = dt(fromDate).locale(lang).format("ddd, D MMM")
+  const departue = dt(toDate).locale(lang).format("ddd, D MMM")
+  const duration = ` ${arrival} - ${departue} (${nights})`
+
+  const allRoomsPackages: Package[] = rooms
+    .flatMap((r) => r.packages)
+    .filter((r): r is Package => !!r)
+  return (
+    <table className={styles.priceDetailsTable}>
+      {rooms.map((room, idx) => {
+        let currency = ""
+        let chequePrice: CorporateChequePriceType["corporateCheque"] | undefined
+        if ("corporateCheque" in room.price && room.price.corporateCheque) {
+          chequePrice = room.price.corporateCheque
+
+          if (room.price.corporateCheque.currency) {
+            currency = room.price.corporateCheque.currency
+          }
+        }
+
+        let price: RegularPriceType["regular"] | undefined
+        if ("regular" in room.price && room.price.regular) {
+          price = room.price.regular
+          currency = room.price.regular.currency
+        }
+
+        let redemptionPrice: RedemptionPriceType["redemption"] | undefined
+        if ("redemption" in room.price && room.price.redemption) {
+          redemptionPrice = room.price.redemption
+
+          if (room.price.redemption.currency) {
+            currency = room.price.redemption.currency
+          }
+        }
+
+        let voucherPrice: VoucherPriceType["voucher"] | undefined
+        if ("voucher" in room.price && room.price.voucher) {
+          voucherPrice = room.price.voucher
+        }
+
+        if (!currency) {
+          if (room.packages?.length) {
+            currency = room.packages[0].localPrice.currency
+          } else if (room.breakfast) {
+            currency = room.breakfast.localPrice.currency
+          }
+        }
+
+        if (!price && !voucherPrice && !chequePrice && !redemptionPrice) {
+          return null
+        }
+
+        return (
+          <Fragment key={idx}>
+            <Tbody>
+              {rooms.length > 1 && (
+                <tr>
+                  <th colSpan={2}>
+                    <Typography variant="Body/Paragraph/mdBold">
+                      <span>
+                        {intl.formatMessage(
+                          { defaultMessage: "Room {roomIndex}" },
+                          { roomIndex: idx + 1 }
+                        )}
+                      </span>
+                    </Typography>
+                  </th>
+                </tr>
+              )}
+              <HeaderRow title={room.roomType} subtitle={duration} />
+              <RegularPrice
+                bedType={room.bedType}
+                packages={room.packages}
+                price={price}
+              />
+              <CorporateChequePrice
+                bedType={room.bedType}
+                currency={currency}
+                nights={diff}
+                packages={room.packages}
+                price={chequePrice}
+              />
+              <RedemptionPrice
+                bedType={room.bedType}
+                currency={currency}
+                nights={diff}
+                packages={room.packages}
+                price={redemptionPrice}
+              />
+              <VoucherPrice
+                bedType={room.bedType}
+                currency={currency}
+                nights={diff}
+                packages={room.packages}
+                price={voucherPrice}
+              />
+            </Tbody>
+
+            <Breakfast
+              adults={room.adults}
+              breakfast={room.breakfast}
+              breakfastIncluded={room.breakfastIncluded}
+              childrenInRoom={room.childrenInRoom}
+              currency={currency}
+              nights={diff}
+            />
+          </Fragment>
+        )
+      })}
+      <Tbody>
+        <HeaderRow title={intl.formatMessage({ defaultMessage: "Total" })} />
+
+        <VatRow totalPrice={totalPrice} vat={vat} />
+
+        <LargeRow
+          label={intl.formatMessage({ defaultMessage: "Price including VAT" })}
+          value={formatPrice(
+            intl,
+            totalPrice.local.price,
+            totalPrice.local.currency,
+            totalPrice.local.additionalPrice,
+            totalPrice.local.additionalPriceCurrency
+          )}
+        />
+
+        <DiscountedRegularPriceRow
+          currency={totalPrice.local.currency}
+          packages={allRoomsPackages}
+          regularPrice={totalPrice.local.regularPrice}
+        />
+
+        <BookingCodeRow bookingCode={bookingCode} />
+      </Tbody>
+    </table>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/priceDetailsTable.module.css
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/priceDetailsTable.module.css
@@ -0,0 +1,10 @@
+.priceDetailsTable {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .priceDetailsTable {
+    min-width: 512px;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx
@@ -0,0 +1,34 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import Modal from "@/components/Modal"
+
+import PriceDetailsTable, {
+  type PriceDetailsTableProps,
+} from "./PriceDetailsTable"
+
+function Trigger({ title }: { title: string }) {
+  return (
+    <Button
+      variant="Text"
+      typography="Body/Supporting text (caption)/smBold"
+      wrapping={false}
+    >
+      {title}
+      <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
+    </Button>
+  )
+}
+
+export default function PriceDetailsModal(props: PriceDetailsTableProps) {
+  const intl = useIntl()
+  const title = intl.formatMessage({ defaultMessage: "Price details" })
+  return (
+    <Modal title={title} trigger={<Trigger title={title} />}>
+      <PriceDetailsTable {...props} />
+    </Modal>
+  )
+}