"use client" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { useEnterDetailsStore } from "@/stores/enter-details" 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 "./priceDetailsTable.module.css" import { type PriceDetailsTableProps } from "@/types/components/hotelReservation/enterDetails/priceDetailsTable" import type { DetailsState } from "@/types/stores/enter-details" function Row({ label, value, bold, }: { label: string value: string bold?: boolean }) { return ( {label} {value} ) } function TableSection({ children }: React.PropsWithChildren) { return {children} } function TableSectionHeader({ title, subtitle, }: { title: string subtitle?: string }) { return ( {title} {subtitle ? {subtitle} : null} ) } export function storeSelector(state: DetailsState) { return { bedType: state.bedType, booking: state.booking, breakfast: state.breakfast, packages: state.packages, roomRate: state.roomRate, roomPrice: state.roomPrice, totalPrice: state.totalPrice, vat: state.vat, } } export default function PriceDetailsTable({ roomType, }: PriceDetailsTableProps) { const intl = useIntl() const lang = useLang() const { bedType, booking, breakfast, roomPrice, totalPrice, vat } = useEnterDetailsStore(storeSelector) // TODO: Update for Multiroom later const { adults, childrenInRoom } = booking.rooms[0] const diff = dt(booking.toDate).diff(booking.fromDate, "days") const nights = intl.formatMessage( { id: "booking.nights" }, { totalNights: diff } ) const vatPercentage = vat / 100 const vatAmount = totalPrice.local.price * vatPercentage const priceExclVat = totalPrice.local.price - vatAmount const duration = ` ${dt(booking.fromDate).locale(lang).format("ddd, D MMM")} - ${dt(booking.toDate).locale(lang).format("ddd, D MMM")} (${nights})` return ( {bedType ? ( ) : null} {breakfast ? ( {childrenInRoom?.length ? ( ) : null} ) : null}

{intl.formatMessage({ id: "Price including VAT" })}

{formatPrice( intl, totalPrice.local.price, totalPrice.local.currency )}

) }