137 lines
4.6 KiB
TypeScript
137 lines
4.6 KiB
TypeScript
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import {
|
|
CoffeeIcon,
|
|
DiscountIcon,
|
|
DoorClosedIcon,
|
|
PriceTagIcon,
|
|
} from "@/components/Icons"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import styles from "./totalPrice.module.css"
|
|
|
|
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
|
|
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
|
|
|
|
export default async function TotalPrice({
|
|
confirmationNumber,
|
|
}: BookingConfirmationProps) {
|
|
const intl = await getIntl()
|
|
const { booking } = await getBookingConfirmation(confirmationNumber)
|
|
|
|
const totalPrice = intl.formatNumber(booking.totalPrice, {
|
|
currency: booking.currencyCode,
|
|
style: "currency",
|
|
})
|
|
const breakfastPackage = booking.packages.find(
|
|
(p) => p.code === BreakfastPackageEnum.REGULAR_BREAKFAST
|
|
)
|
|
return (
|
|
<section className={styles.container}>
|
|
<hgroup>
|
|
<Subtitle color="uiTextPlaceholder" type="two">
|
|
{intl.formatMessage({ id: "Total price" })}
|
|
</Subtitle>
|
|
<Subtitle color="uiTextHighContrast" type="two">
|
|
{totalPrice} (~ EUR)
|
|
</Subtitle>
|
|
</hgroup>
|
|
<div className={styles.items}>
|
|
<div>
|
|
<DoorClosedIcon />
|
|
<Body color="uiTextPlaceholder">
|
|
{`${intl.formatMessage({ id: "Room" })}, ${intl.formatMessage({ id: "booking.nights" }, { totalNights: 1 })}`}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{totalPrice}</Body>
|
|
</div>
|
|
<div>
|
|
<CoffeeIcon />
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Breakfast" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{breakfastPackage
|
|
? intl.formatNumber(breakfastPackage.totalPrice, {
|
|
currency: breakfastPackage.currency,
|
|
style: "currency",
|
|
})
|
|
: intl.formatMessage({ id: "No breakfast" })}
|
|
</Body>
|
|
</div>
|
|
<div>
|
|
<DiscountIcon />
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Member discount" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">N/A</Body>
|
|
</div>
|
|
<div>
|
|
<PriceTagIcon height={20} width={20} />
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Points used" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">N/A</Body>
|
|
</div>
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.items}>
|
|
<div>
|
|
<Caption color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Price excl VAT" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{intl.formatNumber(booking.totalPriceExVat, {
|
|
currency: booking.currencyCode,
|
|
style: "currency",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
<div>
|
|
<Caption color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "VAT" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">{booking.vatPercentage}%</Caption>
|
|
</div>
|
|
<div>
|
|
<Caption color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "VAT amount" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{intl.formatNumber(booking.vatAmount, {
|
|
currency: booking.currencyCode,
|
|
style: "currency",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
<div>
|
|
<Caption color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Price incl VAT" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{intl.formatNumber(booking.totalPrice, {
|
|
currency: booking.currencyCode,
|
|
style: "currency",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
<div>
|
|
<Caption color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Payment method" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">N/A</Caption>
|
|
</div>
|
|
<div>
|
|
<Caption color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Payment status" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">N/A</Caption>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|