"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 { getNights } from "@/utils/dateFormatting" 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 }: { label: string; value: string }) { return ( {label} {value} ) } function TableSection({ children }: React.PropsWithChildren) { return {children} } function TableSectionHeader({ title }: { title: string }) { return ( {title} ) } export function storeSelector(state: DetailsState) { return { bedType: state.bedType, booking: state.booking, breakfast: state.breakfast, join: state.guest.join, membershipNo: state.guest.membershipNo, packages: state.packages, roomRate: state.roomRate, roomPrice: state.roomPrice, toggleSummaryOpen: state.actions.toggleSummaryOpen, togglePriceDetailsModalOpen: state.actions.togglePriceDetailsModalOpen, totalPrice: state.totalPrice, vat: state.vat, } } export default function PriceDetailsTable({ roomType, }: PriceDetailsTableProps) { const intl = useIntl() const lang = useLang() const { bedType, booking, breakfast, join, membershipNo, packages, roomPrice, roomRate, toggleSummaryOpen, togglePriceDetailsModalOpen, totalPrice, vat, } = useEnterDetailsStore(storeSelector) // TODO: Update for Multiroom later const { adults, children } = booking.rooms[0] const nights = getNights(booking.fromDate, booking.toDate) const vatPercentage = vat / 100 const vatAmount = totalPrice.local.price * vatPercentage const priceExclVat = totalPrice.local.price - vatAmount return ( {nights.map((night) => { return ( ) })} {bedType ? ( ) : null} {breakfast ? ( {children?.length ? ( ) : null} ) : null}

{intl.formatMessage({ id: "booking.vat.incl" })}

{intl.formatNumber(totalPrice.local.price, { currency: totalPrice.local.currency, style: "currency", })}

) }