62 lines
1.5 KiB
TypeScript
62 lines
1.5 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 "./guests.module.css"
|
|
|
|
export default function Guests() {
|
|
const intl = useIntl()
|
|
const rooms = useMyStayStore((state) => state.rooms)
|
|
|
|
const adults = rooms.reduce((acc, room) => acc + room.adults, 0)
|
|
|
|
const children = rooms.reduce(
|
|
(acc, room) => acc + (room.childrenAges?.length ?? 0),
|
|
0
|
|
)
|
|
|
|
const adultsMsg = intl.formatMessage(
|
|
{
|
|
defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
|
|
},
|
|
{ adults }
|
|
)
|
|
|
|
const childrenMsg = intl.formatMessage(
|
|
{
|
|
defaultMessage: "{children, plural, one {# child} other {# children}}",
|
|
},
|
|
{ children }
|
|
)
|
|
|
|
const adultsOnlyMsg = adultsMsg
|
|
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(" · ")
|
|
|
|
let guests = ""
|
|
if (children > 0) {
|
|
guests = adultsAndChildrenMsg
|
|
} else {
|
|
guests = adultsOnlyMsg
|
|
}
|
|
|
|
return (
|
|
<div className={styles.row}>
|
|
<div className={styles.label}>
|
|
<MaterialIcon icon="person" />
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.textDefault}>
|
|
{intl.formatMessage({ defaultMessage: "Guests" })}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.guests}>{guests}</p>
|
|
</Typography>
|
|
</div>
|
|
)
|
|
}
|