Files
web/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
2024-10-15 09:52:50 +02:00

54 lines
1.8 KiB
TypeScript

import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./rateSummary.module.css"
import { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
export default function RateSummary({ rateSummary, user }: RateSummaryProps) {
const intl = useIntl()
return (
<div className={styles.summary}>
<div className={styles.summaryText}>
<Subtitle>{rateSummary.roomType}</Subtitle>
<Body>{rateSummary.priceName}</Body>
</div>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceText}>
{user ? (
<>
<Subtitle color="red">
{rateSummary.member?.localPrice.pricePerStay}{" "}
{rateSummary.member?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.member?.requestedPrice?.pricePerStay}{" "}
{rateSummary.member?.requestedPrice?.currency}
</Body>
</>
) : (
<>
<Subtitle>
{rateSummary.public?.localPrice.pricePerStay}{" "}
{rateSummary.public?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.public?.requestedPrice?.pricePerStay}{" "}
{rateSummary.public?.requestedPrice?.currency}
</Body>
</>
)}
</div>
<Button type="submit" theme="base">
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>
</div>
)
}