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,12 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+  border-radius: var(--Corner-radius-Small);
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    border-radius: var(--Corner-radius-Large);
+  }
+}
@@ -0,0 +1,48 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints"
+import Table from "@/components/TempDesignSystem/Table"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+const tableHeadings = ["Points", "Expiration Date"]
+
+export default function ExpiringPointsTable({
+  points,
+  expirationDate,
+}: {
+  points: number
+  expirationDate: string
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+  const expiration = dt(expirationDate).locale(lang).format("DD MMM YYYY")
+
+  return (
+    <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>
+        <Table.TR>
+          <Table.TD>
+            <AwardPoints awardPoints={points} isCalculated isExpiringPoints />
+          </Table.TD>
+          <Table.TD>{expiration}</Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  )
+}
@@ -1,27 +1,30 @@
-import { getIntl } from "@/i18n"
+import { serverClient } from "@/lib/trpc/server"

-import styles from "./expiringPoints.module.css"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+
+import ExpiringPointsTable from "./ExpiringPointsTable"
+
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function ExpiringPoints({
+  link,
+  subtitle,
+  title,
+}: AccountPageComponentProps) {
+  const membershipLevel = await serverClient().user.membershipLevel()
+
+  if (!membershipLevel?.pointsToExpire || !membershipLevel?.pointsExpiryDate) {
+    return null
+  }

-export async function ExpiringPoints() {
-  const { formatMessage } = await getIntl()
  return (
-    <table className={styles.table}>
-      <thead className={styles.thead}>
-        <tr>
-          <th className={styles.th}>{formatMessage({ id: "Arrival date" })}</th>
-          <th className={styles.th}>{formatMessage({ id: "Points" })}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr className={styles.tr}>
-          <td className={styles.td}>23 May 2023</td>
-          <td className={styles.td}>30000</td>
-        </tr>
-        <tr className={styles.tr}>
-          <td className={styles.td}>23 May 2023</td>
-          <td className={styles.td}>-15000</td>
-        </tr>
-      </tbody>
-    </table>
+    <SectionContainer>
+      <SectionHeader title={title} link={link} subtitle={subtitle} />
+      <ExpiringPointsTable
+        points={membershipLevel.pointsToExpire}
+        expirationDate={membershipLevel.pointsExpiryDate}
+      />
+    </SectionContainer>
  )
 }