feat(SW-164): Add pagination for friendship transactions

2024-08-13 11:33:06 +02:00
parent 2282e35a71
commit 6f293be3a7
13 changed files with 202 additions and 91 deletions
--- a/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/index.tsx
@@ -0,0 +1,84 @@
+"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 { formatMessage } = useIntl()
+
+  return (
+    <div className={styles.container}>
+      <table className={styles.table}>
+        <thead className={styles.thead}>
+          <tr>
+            <Body asChild>
+              <th className={styles.th}>
+                {formatMessage({ id: "Transactions" })}
+              </th>
+            </Body>
+            <Body asChild>
+              <th className={styles.th}>{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} ${formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
+                  </span>
+                </td>
+                <AwardPoints awardPoints={transaction.awardPoints} />
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td className={styles.placeholder} colSpan={2}>
+                {formatMessage({ id: "There are no transactions to display" })}
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+
+      {hasMore ? (
+        <button
+          className={styles.loadMoreButton}
+          onClick={() => {
+            showMore()
+          }}
+        >
+          <ChevronDownIcon height={24} width={24} />
+          {formatMessage({ id: "Show more" })}
+        </button>
+      ) : null}
+    </div>
+  )
+}
--- a/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/mobile.module.css
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/mobile.module.css
@@ -0,0 +1,52 @@
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+.thead {
+  background-color: var(--Main-Grey-10);
+}
+
+.th {
+  padding: var(--Spacing-x2);
+}
+
+.tr {
+  border-top: 1px solid var(--Main-Grey-10);
+}
+
+.td {
+  padding: var(--Spacing-x2);
+}
+
+.transactionDetails {
+  display: grid;
+  font-size: var(--typography-Footnote-Regular-fontSize);
+}
+
+.transactionDate {
+  font-weight: 700;
+}
+
+.placeholder {
+  text-align: center;
+  padding: var(--Spacing-x4);
+  border: 1px solid var(--Main-Grey-10);
+}
+.loadMoreButton {
+  background-color: var(--Main-Grey-10);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x2);
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    display: none;
+  }
+}