web/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

"use client"
import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"
import { trpc } from "@/lib/trpc/client"

import Header from "@/components/MyPages/Blocks/Header"

import styles from "./earnAndBurn.module.css"

import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
import { Page, RowProps } from "@/types/components/myPages/myPage/earnAndBurn"

const tableHeadings = [
  "Arrival date",
  "Description",
  "Booking number",
  "Transaction date",
  "Points",
]

function EarnAndBurn({
  lang,
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const intl = useIntl()
  const { data, hasNextPage, 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 (
    <div className={styles.container}>
      <Header title={title} link={link} subtitle={subtitle} />

      <div className={styles.mobileTableContainer}>
        <table className={styles.mobileTable}>
          <thead className={styles.mobileThead}>
            <tr>
              <th className={styles.mobileTh}>
                {intl.formatMessage({ id: "Transactions" })}
              </th>
              <th className={styles.mobileTh}>
                {intl.formatMessage({ id: "Points" })}
              </th>
            </tr>
          </thead>
          <tbody>
            {transactions.length ? (
              transactions.map((transaction) => (
                <tr
                  className={styles.mobileTr}
                  key={transaction.confirmationNumber}
                >
                  <td
                    className={`${styles.mobileTd} ${styles.mobileTransactionDetails}`}
                  >
                    <span className={styles.mobileTransactionDate}>
                      {dt(transaction.checkinDate)
                        .locale(lang)
                        .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>
                  <td
                    className={`${styles.mobileTd} ${styles.mobileTransactionPoints}`}
                  >
                    {`${transaction.awardPoints} P`}
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td className={styles.mobilePlaceholder} colSpan={2}>
                  {intl.formatMessage({ id: "Empty" })}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className={styles.tableContainer}>
        {transactions.length ? (
          <table className={styles.table}>
            <thead className={styles.thead}>
              <tr>
                {tableHeadings.map((heading) => (
                  <th key={heading} className={styles.th}>
                    {intl.formatMessage({ id: 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}
          // >
          // {intl.formatMessage({id:"See more transactions"})}
          // </Button>
          <table className={styles.table}>
            <thead className={styles.thead}>
              <tr>
                {tableHeadings.map((heading) => (
                  <th key={heading} className={styles.th}>
                    {heading}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              <tr>
                <td
                  colSpan={tableHeadings.length}
                  className={styles.placeholder}
                >
                  {intl.formatMessage({ id: "No transactions available" })}
                </td>
              </tr>
            </tbody>
          </table>
        )}
      </div>
    </div>
  )
}

function Row({ transaction, lang }: RowProps) {
  const intl = useIntl()
  const description =
    transaction.hotelName && transaction.city
      ? `${intl.formatMessage({ id: transaction.hotelName })}, ${transaction.city} ${transaction.nights} ${intl.formatMessage({ id: "nights" })}`
      : `${transaction.nights} ${intl.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>
  )
}

export default EarnAndBurn