"use client" import { useIntl } from "react-intl" import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import { ChevronRightSmallIcon } from "@/components/Icons" import SkeletonShimmer from "@/components/SkeletonShimmer" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" import Body from "@/components/TempDesignSystem/Text/Body" import { formatPrice } from "@/utils/numberFormatting" import styles from "./totalPrice.module.css" export default function TotalPrice() { const intl = useIntl() const rooms = useBookingConfirmationStore((state) => state.rooms) const currencyCode = useBookingConfirmationStore( (state) => 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: "Total price" })} {hasAllRoomsLoaded ? ( {formatPrice(intl, grandTotal, currencyCode)} ) : ( )}

{hasAllRoomsLoaded ? (

) : (

)}

) }