141 lines
4.1 KiB
TypeScript
141 lines
4.1 KiB
TypeScript
import { useSearchParams } from "next/navigation"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import { calculatePricesPerNight } from "./utils"
|
|
|
|
import styles from "./priceList.module.css"
|
|
|
|
import type { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
|
|
|
|
export default function PriceList({
|
|
publicPrice = {},
|
|
memberPrice = {},
|
|
petRoomPackage,
|
|
}: PriceListProps) {
|
|
const intl = useIntl()
|
|
|
|
const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
|
|
publicPrice
|
|
const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
|
|
memberPrice
|
|
|
|
const petRoomLocalPrice = petRoomPackage?.localPrice
|
|
const petRoomRequestedPrice = petRoomPackage?.requestedPrice
|
|
|
|
const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
|
|
const searchParams = useSearchParams()
|
|
const fromDate = searchParams.get("fromDate")
|
|
const toDate = searchParams.get("toDate")
|
|
|
|
let nights = 1
|
|
|
|
if (fromDate && toDate) {
|
|
nights = dt(toDate).diff(dt(fromDate), "days")
|
|
}
|
|
|
|
const {
|
|
totalPublicLocalPricePerNight,
|
|
totalMemberLocalPricePerNight,
|
|
totalPublicRequestedPricePerNight,
|
|
totalMemberRequestedPricePerNight,
|
|
} = calculatePricesPerNight({
|
|
publicLocalPrice,
|
|
memberLocalPrice,
|
|
publicRequestedPrice,
|
|
memberRequestedPrice,
|
|
petRoomLocalPrice,
|
|
petRoomRequestedPrice,
|
|
nights,
|
|
})
|
|
|
|
return (
|
|
<dl className={styles.priceList}>
|
|
<div className={styles.priceRow}>
|
|
<dt>
|
|
<Caption
|
|
type="bold"
|
|
color={
|
|
totalPublicLocalPricePerNight ? "uiTextHighContrast" : "disabled"
|
|
}
|
|
>
|
|
{intl.formatMessage({ id: "Standard price" })}
|
|
</Caption>
|
|
</dt>
|
|
<dd>
|
|
{publicLocalPrice ? (
|
|
<div className={styles.price}>
|
|
<Subtitle type="two" color="uiTextHighContrast">
|
|
{totalPublicLocalPricePerNight}
|
|
</Subtitle>
|
|
<Body color="uiTextHighContrast" textTransform="bold">
|
|
{publicLocalPrice.currency}
|
|
<span className={styles.perNight}>
|
|
/{intl.formatMessage({ id: "night" })}
|
|
</span>
|
|
</Body>
|
|
</div>
|
|
) : (
|
|
<Subtitle type="two" color="baseTextDisabled">
|
|
{intl.formatMessage({ id: "n/a" })}
|
|
</Subtitle>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
|
|
<div className={styles.priceRow}>
|
|
<dt>
|
|
<Caption type="bold" color={memberLocalPrice ? "red" : "disabled"}>
|
|
{intl.formatMessage({ id: "Member price" })}
|
|
</Caption>
|
|
</dt>
|
|
<dd>
|
|
{memberLocalPrice ? (
|
|
<div className={styles.price}>
|
|
<Subtitle type="two" color="red">
|
|
{totalMemberLocalPricePerNight}
|
|
</Subtitle>
|
|
<Body color="red" textTransform="bold">
|
|
{memberLocalPrice.currency}
|
|
<span className={styles.perNight}>
|
|
/{intl.formatMessage({ id: "night" })}
|
|
</span>
|
|
</Body>
|
|
</div>
|
|
) : (
|
|
<Body textTransform="bold" color="disabled">
|
|
- {intl.formatMessage({ id: "Currency Code" })}
|
|
</Body>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
|
|
<div className={styles.priceRow}>
|
|
<dt>
|
|
<Caption
|
|
color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
|
|
>
|
|
{intl.formatMessage({ id: "Approx." })}
|
|
</Caption>
|
|
</dt>
|
|
<dd>
|
|
{showRequestedPrice ? (
|
|
<Caption color="uiTextMediumContrast">
|
|
{totalPublicRequestedPricePerNight}/
|
|
{totalMemberRequestedPricePerNight}{" "}
|
|
{publicRequestedPrice.currency}
|
|
</Caption>
|
|
) : (
|
|
<Caption color="disabled">- / - EUR</Caption>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
)
|
|
}
|