89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import { ChevronDownIcon } from "@/components/Icons"
|
|
import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/AwardPoints"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
import styles from "./mobile.module.css"
|
|
|
|
import type { TablePropsPagination } from "@/types/components/myPages/myPage/earnAndBurn"
|
|
|
|
export default function MobileTable({
|
|
transactions,
|
|
showMore,
|
|
hasMore,
|
|
}: TablePropsPagination) {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<table className={styles.table}>
|
|
<thead className={styles.thead}>
|
|
<tr>
|
|
<Body asChild>
|
|
<th className={styles.th}>
|
|
{intl.formatMessage({ id: "Transactions" })}
|
|
</th>
|
|
</Body>
|
|
<Body asChild>
|
|
<th className={styles.th}>
|
|
{intl.formatMessage({ id: "Points" })}
|
|
</th>
|
|
</Body>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transactions.length ? (
|
|
transactions.map((transaction, idx) => (
|
|
<tr
|
|
className={styles.tr}
|
|
key={`${transaction.confirmationNumber}-${idx}`}
|
|
>
|
|
<td className={`${styles.td} ${styles.transactionDetails}`}>
|
|
<span className={styles.transactionDate}>
|
|
{dt(transaction.checkinDate)
|
|
.locale(getLang())
|
|
.format("DD MMM YYYY")}
|
|
</span>
|
|
{transaction.hotelName && transaction.city ? (
|
|
<span>{`${transaction.hotelName}, ${transaction.city}`}</span>
|
|
) : null}
|
|
<span>
|
|
{`${transaction.nights} ${intl.formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
|
|
</span>
|
|
</td>
|
|
<AwardPoints awardPoints={transaction.awardPoints} />
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className={styles.placeholder} colSpan={2}>
|
|
{intl.formatMessage({
|
|
id: "There are no transactions to display",
|
|
})}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
|
|
{hasMore ? (
|
|
<button
|
|
className={styles.loadMoreButton}
|
|
onClick={() => {
|
|
showMore()
|
|
}}
|
|
>
|
|
<ChevronDownIcon height={24} width={24} />
|
|
{intl.formatMessage({ id: "Show more" })}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|