50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { useMyStayStore } from "@/stores/my-stay"
|
|
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
|
|
import styles from "./reference.module.css"
|
|
|
|
export default function Reference() {
|
|
const intl = useIntl()
|
|
const { cancellationNumber, confirmationNumber, isCancelled, rooms } =
|
|
useMyStayStore((state) => ({
|
|
cancellationNumber: state.bookedRoom.cancellationNumber,
|
|
confirmationNumber: state.bookedRoom.confirmationNumber,
|
|
isCancelled: state.bookedRoom.isCancelled,
|
|
rooms: state.rooms,
|
|
}))
|
|
|
|
if (rooms.length > 1) {
|
|
return null
|
|
}
|
|
|
|
const title = isCancelled
|
|
? intl.formatMessage({
|
|
defaultMessage: "Cancellation number",
|
|
})
|
|
: intl.formatMessage({
|
|
defaultMessage: "Booking number",
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.row}>
|
|
<Typography variant="Body/Lead text">
|
|
<p className={styles.textDefault}>{title}</p>
|
|
</Typography>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<p className={styles.textDefault}>
|
|
{isCancelled ? <s>{cancellationNumber}</s> : confirmationNumber}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
<Divider color="subtle" />
|
|
</>
|
|
)
|
|
}
|