"use client" import { useIntl } from "react-intl" import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import SkeletonShimmer from "@/components/SkeletonShimmer" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { formatPrice } from "@/utils/numberFormatting" import styles from "./paymentDetails.module.css" export default function PaymentDetails() { const intl = useIntl() const { rooms, currencyCode } = useBookingConfirmationStore((state) => ({ rooms: state.rooms, currencyCode: state.currencyCode, })) const hasAllRoomsLoaded = rooms.every((room) => room) const grandTotal = rooms.reduce((acc, room) => { const reservationTotalPrice = room?.totalPrice || 0 return acc + reservationTotalPrice }, 0) return (

{intl.formatMessage({ id: "Payment details" })}

{hasAllRoomsLoaded ? ( {`${intl.formatMessage({ id: "Total cost" })}: ${formatPrice( intl, grandTotal, currencyCode )}`} ) : ( )}

) }