122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
import { _ } from "@/lib/translation"
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
|
|
import styles from "./earnAndBurn.module.css"
|
|
|
|
import {
|
|
EarnAndBurnProps,
|
|
Page,
|
|
RowProps,
|
|
} from "@/types/components/myPages/myPage/earnAndBurn"
|
|
|
|
const tableHeadings = [
|
|
_("Arrival date"),
|
|
_("Description"),
|
|
_("Booking number"),
|
|
_("Transaction date"),
|
|
_("Points"),
|
|
]
|
|
|
|
function EarnAndBurn({ lang }: EarnAndBurnProps) {
|
|
const { data, hasNextPage, isFetching, fetchNextPage } =
|
|
trpc.user.transaction.friendTransactions.useInfiniteQuery(
|
|
{ limit: 5 },
|
|
{
|
|
getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
|
|
}
|
|
)
|
|
|
|
function loadMoreData() {
|
|
if (hasNextPage) {
|
|
fetchNextPage()
|
|
}
|
|
}
|
|
|
|
const transactions = data?.pages.flatMap((page) => page.data) ?? []
|
|
return transactions.length ? (
|
|
<div className={styles.container}>
|
|
<table className={styles.table}>
|
|
<thead className={styles.thead}>
|
|
<tr>
|
|
{tableHeadings.map((heading) => (
|
|
<th key={heading} className={styles.th}>
|
|
{heading}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transactions.map((transaction) => (
|
|
<Row
|
|
lang={lang}
|
|
key={transaction.confirmationNumber}
|
|
transaction={transaction}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{/* TODO: add once pagination is available through API */}
|
|
{/* <Button
|
|
disabled={isFetching}
|
|
intent="primary"
|
|
bgcolor="white"
|
|
type="button"
|
|
onClick={loadMoreData}
|
|
>
|
|
{_("See more transactions")}
|
|
</Button> */}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<table className={styles.table}>
|
|
<thead className={styles.thead}>
|
|
<tr>
|
|
{tableHeadings.map((heading) => (
|
|
<th key={heading} className={styles.th}>
|
|
{heading}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<div className={styles.emptyPlaceholder}>
|
|
{_("No transactions available")}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Row({ transaction, lang }: RowProps) {
|
|
const description =
|
|
transaction.hotelName && transaction.city
|
|
? `${_(transaction.hotelName)}, ${transaction.city} ${transaction.nights} ${_("nights")}`
|
|
: `${transaction.nights} ${_("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>
|
|
)
|
|
}
|
|
|
|
export default EarnAndBurn
|