Files
web/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx

36 lines
1.0 KiB
TypeScript

import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import styles from "./row.module.css"
import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
export default function Row({ transaction, lang }: RowProps) {
const { formatMessage } = useIntl()
const description =
transaction.hotelName && transaction.city
? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`
: `${transaction.nights} ${formatMessage({ id: "nights" })}`
const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
const departure = dt(transaction.checkoutDate)
.locale(lang)
.format("DD MMM YYYY")
const values = [
arrival,
description,
transaction.confirmationNumber,
departure,
transaction.awardPoints,
]
return (
<tr className={styles.tr}>
{values.map((value, idx) => (
<td key={`value-${idx}`} className={styles.td}>
{value}
</td>
))}
</tr>
)
}