Merged in feat/SW-165-correct-labels (pull request #427)

Feat/SW-165 correct labels * feat(SW-165): sort friend transactions and return additional properties * feat(SW-165): Added points being calculated label * feat(SW-165): added transactionDate for transactions without checkinDate * feat(SW-165): Updated description copy for various reward types * feat(SW-165): filter out expired transactions * feat(SW-165): removed Mobile table and unified them into Table instead * feat(SW-165): Added bookingUrl to friend transactions * fix(SW-165): style fixes * fix(SW-165): fix issues from merge * fix(SW-165): remove comment * fix(SW-165): fixed booking urls not being set and smaller fixes * fix(SW-165): added comment regarding 'BALFWD' Approved-by: Michael Zetterberg Approved-by: Christel Westerberg
2024-08-21 13:54:55 +00:00
parent 72ebc14f7d
commit 1ec1033267
21 changed files with 292 additions and 239 deletions
--- a/components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Table/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Table/index.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import Row from "./Row"
+
+import styles from "./table.module.css"
+
+import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
+
+const tableHeadings = [
+  "Points",
+  "Description",
+  "Booking number",
+  "Arrival date",
+]
+
+export default function Table({ transactions }: TableProps) {
+  const intl = useIntl()
+  return (
+    <div className={styles.container}>
+      {transactions.length ? (
+        <table className={styles.table}>
+          <thead className={styles.thead}>
+            <tr>
+              {tableHeadings.map((heading) => (
+                <th key={heading} className={styles.th}>
+                  <Body textTransform="bold">
+                    {intl.formatMessage({ id: heading })}
+                  </Body>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {transactions.map((transaction, index) => (
+              <Row
+                key={`${transaction.confirmationNumber}-${index}`}
+                transaction={transaction}
+              />
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <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>
+  )
+}