80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
|
|
import PriceDetails from "../../PriceDetails"
|
|
|
|
import styles from "./totalPrice.module.css"
|
|
|
|
export default function TotalPrice() {
|
|
const intl = useIntl()
|
|
const { rooms, formattedTotalCost } = useBookingConfirmationStore(
|
|
(state) => ({
|
|
bookingCode: state.bookingCode,
|
|
rooms: state.rooms,
|
|
formattedTotalCost: state.formattedTotalCost,
|
|
})
|
|
)
|
|
|
|
const hasAllRoomsLoaded = rooms.every((room) => room)
|
|
const bookingCode = rooms.find((room) => room?.bookingCode)?.bookingCode
|
|
const isMemberRate = rooms.some((room) => room?.rateDefinition.isMemberRate)
|
|
const showDiscounted = bookingCode || isMemberRate
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.price}>
|
|
<div className={styles.entry}>
|
|
<div>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>
|
|
{intl.formatMessage(
|
|
{
|
|
id: "booking.totalPriceInclVat",
|
|
defaultMessage: "<b>Total price</b> (incl VAT)",
|
|
},
|
|
{
|
|
b: (str) => (
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<span>{str}</span>
|
|
</Typography>
|
|
),
|
|
}
|
|
)}
|
|
</p>
|
|
</Typography>
|
|
{/* TODO: Add approx price, we're currently not receiving this value from API */}
|
|
</div>
|
|
<div className={styles.prices}>
|
|
{hasAllRoomsLoaded ? (
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<span
|
|
className={cx(styles.price, {
|
|
[styles.discounted]: showDiscounted,
|
|
})}
|
|
>
|
|
{formattedTotalCost}
|
|
</span>
|
|
</Typography>
|
|
) : (
|
|
<SkeletonShimmer width="25%" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{hasAllRoomsLoaded ? (
|
|
<PriceDetails />
|
|
) : (
|
|
<SkeletonShimmer width="100%" />
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|