"use client" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { trpc } from "@/lib/trpc/client" import { useEnterDetailsStore } from "@/stores/enter-details" import { ArrowRightIcon } from "@/components/Icons" import LoadingSpinner from "@/components/LoadingSpinner" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import useLang from "@/hooks/useLang" import { formatNumber } from "@/utils/format" import styles from "./summary.module.css" import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData" export default function Summary({ isMember }: { isMember: boolean }) { const intl = useIntl() const lang = useLang() const { fromDate, toDate, rooms, hotel, bedType, breakfast } = useEnterDetailsStore((state) => ({ fromDate: state.roomData.fromdate, toDate: state.roomData.todate, rooms: state.roomData.room, hotel: state.roomData.hotel, bedType: state.userData.bedType, breakfast: state.userData.breakfast, })) const totalAdults = rooms.reduce((total, room) => total + room.adults, 0) const { data: availabilityData, isLoading, error, } = trpc.hotel.availability.rooms.useQuery( { hotelId: parseInt(hotel), adults: totalAdults, roomStayStartDate: dt(fromDate).format("YYYY-MM-DD"), roomStayEndDate: dt(toDate).format("YYYY-MM-DD"), }, { enabled: !!hotel && !!fromDate && !!toDate } ) const diff = dt(toDate).diff(fromDate, "days") const nights = intl.formatMessage( { id: "booking.nights" }, { totalNights: diff } ) if (isLoading) { return } const populatedRooms = rooms .map((room) => { const chosenRoom = availabilityData?.roomConfigurations.find( (availRoom) => room.roomtypecode === availRoom.roomTypeCode ) const cancellationText = availabilityData?.rateDefinitions.find( (rate) => rate.rateCode === room.ratecode )?.cancellationText if (chosenRoom) { const memberPrice = chosenRoom.products.find( (rate) => rate.productType.member?.rateCode === room.ratecode )?.productType.member?.localPrice.pricePerStay const publicPrice = chosenRoom.products.find( (rate) => rate.productType.public?.rateCode === room.ratecode )?.productType.public?.localPrice.pricePerStay return { roomType: chosenRoom.roomType, memberPrice: memberPrice && formatNumber(parseInt(memberPrice)), publicPrice: publicPrice && formatNumber(parseInt(publicPrice)), adults: room.adults, children: room.child, cancellationText, } } }) .filter((room): room is RoomsData => room !== undefined) return (
{intl.formatMessage({ id: "Summary" })} {dt(fromDate).locale(lang).format("ddd, D MMM")} {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
{populatedRooms.map((room, idx) => ( ))} {bedType ? (
{bedType} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: "0", currency: "SEK" } )}
) : null} {breakfast ? (
{breakfast} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: "0", currency: "SEK" } )}
) : null}
{intl.formatMessage({ id: "Total price (incl VAT)" })} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: "4686", currency: "SEK" } )}
{intl.formatMessage({ id: "Approx." })} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: "455", currency: "EUR" } )}
) } function RoomBreakdown({ room, isMember, }: { room: RoomsData isMember: boolean }) { const intl = useIntl() let color: "uiTextHighContrast" | "red" = "uiTextHighContrast" let price = room.publicPrice if (isMember) { color = "red" price = room.memberPrice } return (
{room.roomType} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: price, currency: "SEK" } )}
{intl.formatMessage( { id: "booking.adults" }, { totalAdults: room.adults } )} {room.children?.length ? ( {intl.formatMessage( { id: "booking.children" }, { totalChildren: room.children.length } )} ) : null} {room.cancellationText} {intl.formatMessage({ id: "Rate details" })}
) }