44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { useMyStayStore } from "@/stores/my-stay"
|
|
|
|
import styles from "./cancellations.module.css"
|
|
|
|
export default function Cancellations() {
|
|
const intl = useIntl()
|
|
const rooms = useMyStayStore((state) => state.rooms)
|
|
const cancelledRooms = rooms.filter((r) => r.isCancelled).length
|
|
|
|
if (!cancelledRooms) {
|
|
return null
|
|
}
|
|
|
|
const totalRoomsMsg = intl.formatMessage(
|
|
{
|
|
defaultMessage: "{totalRooms, plural, one {# room} other {# rooms}}",
|
|
},
|
|
{ totalRooms: cancelledRooms }
|
|
)
|
|
|
|
return (
|
|
<div className={styles.row}>
|
|
<div className={styles.label}>
|
|
<MaterialIcon icon="cancel" />
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.textDefault}>
|
|
{intl.formatMessage({ defaultMessage: "Cancellations" })}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.textDefault}>{totalRoomsMsg}</p>
|
|
</Typography>
|
|
</div>
|
|
)
|
|
}
|