923206ee4c
chore(SW-3145): Move Title and Subtitle to design-system * Move Title and Subtitle to design-system * Fix export Approved-by: Linus Flood
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
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 { useBookingConfirmationStore } from "@/stores/booking-confirmation"
|
|
|
|
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 (
|
|
<div className={styles.details}>
|
|
<Subtitle color="uiTextHighContrast" type="two">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Payment details",
|
|
})}
|
|
</Subtitle>
|
|
<div className={styles.payment}>
|
|
{hasAllRoomsLoaded ? (
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Total cost: {amount}",
|
|
},
|
|
{
|
|
amount: formattedTotalCost,
|
|
}
|
|
)}
|
|
</Body>
|
|
) : (
|
|
<SkeletonShimmer width={"100%"} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|