Merged in feat/CJ-17-points-expiration-table (pull request #527)

Feat/CJ-17 points expiration table * feat(CJ-17): Added point expiration table and refactored to use Table component * feat(CJ-17): Use Table component inside Row * fix(CJ-117): Added missing css class and update date formatting * fix(CJ-117): Added copy of membershipLevel route with a protectedProcedure Approved-by: Christel Westerberg
2024-09-05 09:28:25 +00:00
parent 650b38b409
commit 238de4cd3a
20 changed files with 260 additions and 234 deletions
@@ -0,0 +1,100 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import { webviews } from "@/constants/routes/webviews"
+import { dt } from "@/lib/dt"
+
+import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints"
+import Link from "@/components/TempDesignSystem/Link"
+import Table from "@/components/TempDesignSystem/Table"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
+import { RewardTransactionTypes } from "@/types/components/myPages/myPage/enums"
+
+export default function Row({ transaction }: RowProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const pathName = usePathname()
+  const isWebview = webviews.includes(pathName)
+
+  const nightString = `${transaction.nights} ${transaction.nights === 1 ? intl.formatMessage({ id: "night" }) : intl.formatMessage({ id: "nights" })}`
+
+  let description =
+    transaction.hotelName && transaction.city
+      ? `${transaction.hotelName}, ${transaction.city} ${nightString}`
+      : `${nightString}`
+
+  switch (transaction.type) {
+    case RewardTransactionTypes.stay:
+    case RewardTransactionTypes.stayAdj:
+      if (transaction.hotelId === "ORS") {
+        description = intl.formatMessage({ id: "Former Scandic Hotel" })
+      }
+      if (transaction.confirmationNumber === "BALFWD") {
+        description = intl.formatMessage({
+          id: "Points earned prior to May 1, 2021",
+        })
+      }
+      break
+    case RewardTransactionTypes.ancillary:
+      description = intl.formatMessage({ id: "Extras to your booking" })
+      break
+    case RewardTransactionTypes.enrollment:
+      description = intl.formatMessage({ id: "Sign up bonus" })
+      break
+    case RewardTransactionTypes.mastercard_points:
+      description = intl.formatMessage({ id: "Scandic Friends Mastercard" })
+      break
+    case RewardTransactionTypes.tui_points:
+      description = intl.formatMessage({ id: "TUI Points" })
+
+    case RewardTransactionTypes.pointShop:
+      description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
+      break
+  }
+
+  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
+
+  function renderConfirmationNumber() {
+    if (transaction.confirmationNumber === "BALFWD") return null
+
+    if (
+      !isWebview &&
+      transaction.bookingUrl &&
+      (transaction.type === RewardTransactionTypes.stay ||
+        transaction.type === RewardTransactionTypes.rewardNight)
+    ) {
+      return (
+        <Link variant="underscored" href={transaction.bookingUrl}>
+          {transaction.confirmationNumber}
+        </Link>
+      )
+    }
+
+    return transaction.confirmationNumber
+  }
+
+  return (
+    <Table.TR>
+      <Table.TD>
+        <AwardPoints
+          awardPoints={transaction.awardPoints}
+          isCalculated={transaction.pointsCalculated}
+        />
+      </Table.TD>
+      <Table.TD>
+        <Body textTransform="bold">{description}</Body>
+      </Table.TD>
+      <Table.TD>{renderConfirmationNumber()}</Table.TD>
+      <Table.TD>
+        {transaction.checkinDate && transaction.confirmationNumber !== "BALFWD"
+          ? arrival
+          : null}
+      </Table.TD>
+    </Table.TR>
+  )
+}
@@ -0,0 +1,18 @@
+.container {
+  overflow-x: auto;
+  border-radius: var(--Corner-radius-Small);
+}
+
+.placeholder {
+  width: 100%;
+  padding: 24px;
+  text-align: center;
+  border: 1px solid var(--Scandic-Brand-Pale-Peach);
+  background-color: #fff;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    border-radius: var(--Corner-radius-Large);
+  }
+}
@@ -0,0 +1,57 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Table from "@/components/TempDesignSystem/Table"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import Row from "./Row"
+
+import styles from "./clientTable.module.css"
+
+import type { ClientTableProps } from "@/types/components/myPages/myPage/earnAndBurn"
+
+const tableHeadings = [
+  "Points",
+  "Description",
+  "Booking number",
+  "Arrival date",
+]
+
+export default function ClientTable({ transactions }: ClientTableProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.container}>
+      <Table>
+        <Table.THead>
+          <Table.TR>
+            {tableHeadings.map((heading) => (
+              <Table.TH key={heading}>
+                <Body textTransform="bold">
+                  {intl.formatMessage({ id: heading })}
+                </Body>
+              </Table.TH>
+            ))}
+          </Table.TR>
+        </Table.THead>
+        <Table.TBody>
+          {transactions.length ? (
+            transactions.map((transaction, index) => (
+              <Row
+                key={`${transaction.confirmationNumber}-${index}`}
+                transaction={transaction}
+              />
+            ))
+          ) : (
+            <Table.TR className={styles.placeholder}>
+              <Table.TD colSpan={tableHeadings.length}>
+                {intl.formatMessage({ id: "No transactions available" })}
+              </Table.TD>
+            </Table.TR>
+          )}
+        </Table.TBody>
+      </Table>
+    </div>
+  )
+}