"use client" import { useIntl } from "react-intl" import { useBookingConfirmationStore } from "@scandic-hotels/booking-flow/stores/booking-confirmation" import Body from "@scandic-hotels/design-system/Body" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import Subtitle from "@scandic-hotels/design-system/Subtitle" import styles from "./paymentDetails.module.css" export default function PaymentDetails() { const intl = useIntl() const { rooms, formattedTotalCost } = useBookingConfirmationStore( (state) => ({ rooms: state.rooms, formattedTotalCost: state.formattedTotalCost, }) ) const hasAllRoomsLoaded = rooms.every((room) => room) return (

{intl.formatMessage({ defaultMessage: "Payment details", })}

{hasAllRoomsLoaded ? ( {intl.formatMessage( { defaultMessage: "Total cost: {amount}", }, { amount: formattedTotalCost, } )} ) : ( )}

) }