Files
web/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Large.tsx
2025-06-30 10:57:00 +00:00

72 lines
1.9 KiB
TypeScript

import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./row.module.css"
import type { Price } from "@/types/components/hotelReservation/price"
interface RowProps {
allPricesIsDiscounted: boolean
label: string
price: Price
}
export default function LargeRow({
allPricesIsDiscounted,
label,
price,
}: RowProps) {
const intl = useIntl()
const isVoucherRate = price.local.currency === CurrencyEnum.Voucher
const currency = isVoucherRate
? intl.formatMessage({ defaultMessage: "Voucher" })
: price.local.currency
const totalPrice = formatPrice(
intl,
price.local.price,
currency,
price.local.additionalPrice,
price.local.additionalPriceCurrency
)
const regularPrice = price.local.regularPrice
? formatPrice(
intl,
price.local.regularPrice,
price.local.currency,
price.local.additionalPrice,
price.local.additionalPriceCurrency
)
: null
const isDiscounted =
allPricesIsDiscounted ||
(price.local.regularPrice !== undefined &&
price.local.regularPrice > price.local.price)
return (
<Typography variant="Body/Paragraph/mdBold">
<tr className={styles.row}>
<td>
<span>{label}</span>
</td>
<td className={styles.price}>
{isDiscounted && regularPrice ? (
<>
<Typography variant="Body/Paragraph/mdRegular">
<s className={styles.strikeThroughRate}>{regularPrice}</s>
</Typography>
</>
) : null}
<span className={cx({ [styles.discounted]: isDiscounted })}>
{totalPrice}
</span>
</td>
</tr>
</Typography>
)
}