feat: add initial support for points page

components/MyPages/AccountPage/Content.tsx

@@ -2,11 +2,14 @@ import JsonToHtml from "@/components/JsonToHtml"
 import CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
 import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
 import Overview from "@/components/MyPages/Blocks/Overview"
+import CurrentPointsBalance from "@/components/MyPages/Blocks/Points/CurrentPointsBalance"
+import EarnAndBurn from "@/components/MyPages/Blocks/Points/EarnAndBurn"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
+import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
 import SoonestStays from "@/components/MyPages/Blocks/Stays/Soonest"
 import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
 
-import PreviousStays from "../Blocks/Stays/Previous"
+import { ExpiringPoints } from "../Blocks/Points/ExpiringPoints"
 
 import {
   AccountPageContentProps,
@@ -31,6 +34,12 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
       return <CurrentBenefitsBlock {...props} />
     case DynamicContentComponents.next_benefits:
       return <NextLevelBenefitsBlock {...props} />
+    case DynamicContentComponents.my_points:
+      return <CurrentPointsBalance />
+    case DynamicContentComponents.expiring_points:
+      return <ExpiringPoints />
+    case DynamicContentComponents.earn_and_burn:
+      return <EarnAndBurn />
     default:
       return null
   }

components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css

@@ -0,0 +1,14 @@
+.card {
+  background-color: var(--Base-Fill-Normal);
+  border-radius: 16px;
+  color: var(Theme/Primary/Light/On Surface/Text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.points {
+  font-size: var(--typography-Title2-Desktop-fontSize);
+  margin: 0;
+}

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -0,0 +1,19 @@
+import { _ } from "@/lib/translation"
+
+import styles from "./currentPointsBalance.module.css"
+
+const CurrentPointsBalance = () => {
+  const points = 30000
+
+  return (
+    <div className={styles.card}>
+      <h2>{_("Total points*")}</h2>
+      <p className={styles.points}>{`${_("Points")}: ${points}`}</p>
+      <p className={styles.disclaimer}>
+        {_("*Points may take up to 10 days to be displayed.")}
+      </p>
+    </div>
+  )
+}
+
+export default CurrentPointsBalance

components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.thead {
+  background-color: var(--Base-Fill-Normal);
+  border-left: 1px solid var(--Base-Fill-Normal);
+  border-right: 1px solid var(--Base-Fill-Normal);
+}
+
+.tr {
+  border: 1px solid #e6e9ec;
+}
+
+.th {
+  text-align: left;
+  padding: 20px 32px;
+}
+
+.td {
+  text-align: left;
+  padding: 16px 32px;
+}

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

@@ -0,0 +1,44 @@
+import { _ } from "@/lib/translation"
+
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./earnAndBurn.module.css"
+
+const EarnAndBurn = () => {
+  return (
+    <div className={styles.container}>
+      <table className={styles.table}>
+        <thead className={styles.thead}>
+          <tr>
+            <th className={styles.th}>{_("Arrival date")}</th>
+            <th className={styles.th}>{_("Description")}</th>
+            <th className={styles.th}>{_("Booking number")}</th>
+            <th className={styles.th}>{_("Transaction date")}</th>
+            <th className={styles.th}>{_("Points")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className={styles.tr}>
+            <td className={styles.td}>23 May 2023</td>
+            <td className={styles.td}>Scandic Mölndal, Mölndal 2 nights</td>
+            <td className={styles.td}>5123456576</td>
+            <td className={styles.td}>26 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}>Scandic Mölndal, Mölndal 2 nights</td>
+            <td className={styles.td}>5123456576</td>
+            <td className={styles.td}>26 May 2023</td>
+            <td className={styles.td}>-30000</td>
+          </tr>
+        </tbody>
+      </table>
+      <Button intent="primary" bgcolor="white" type="button">
+        {_("See more transactions")}
+      </Button>
+    </div>
+  )
+}
+
+export default EarnAndBurn

components/MyPages/Blocks/Points/ExpiringPoints/expiringPoints.module.css

@@ -0,0 +1,25 @@
+.table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.thead {
+  background-color: var(--Base-Fill-Normal);
+  border-left: 1px solid var(--Base-Fill-Normal);
+  border-right: 1px solid var(--Base-Fill-Normal);
+}
+
+.tr {
+  border: 1px solid #e6e9ec;
+}
+
+.th {
+  text-align: left;
+  padding: 20px 32px;
+}
+
+.td {
+  text-align: left;
+  padding: 16px 32px;
+}

components/MyPages/Blocks/Points/ExpiringPoints/index.tsx

@@ -0,0 +1,26 @@
+import { _ } from "@/lib/translation"
+
+import styles from "./expiringPoints.module.css"
+
+export const ExpiringPoints = () => {
+  return (
+    <table className={styles.table}>
+      <thead className={styles.thead}>
+        <tr>
+          <th className={styles.th}>{_("Arrival date")}</th>
+          <th className={styles.th}>{_("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>
+  )
+}

constants/routes/authRequired.ts

@@ -2,6 +2,7 @@ import {
   benefits,
   myPages,
   overview,
+  points,
   profile,
   profileEdit,
   stays,
@@ -19,4 +20,5 @@ export const authRequired = [
   ...Object.values(profile),
   ...Object.values(profileEdit),
   ...Object.values(stays),
+  ...Object.values(points),
 ]

constants/routes/myPages.js

@@ -48,6 +48,16 @@ export const profileEdit = {
   sv: `${profile.sv}/redigera`,
 }
 
+/** @type {import('@/types/routes').LangRoute} */
+export const points = {
+  da: `${myPages.da}/points`,
+  de: `${myPages.de}/points`,
+  en: `${myPages.en}/points`,
+  fi: `${myPages.fi}/points`,
+  no: `${myPages.no}/points`,
+  sv: `${myPages.sv}/points`,
+}
+
 /** @type {import('@/types/routes').LangRoute} */
 export const benefits = {
   da: `${myPages.da}/fordele`,

types/components/myPages/myPage/enums.ts

@@ -5,6 +5,9 @@ export enum DynamicContentComponents {
   upcoming_stays = "upcoming_stays",
   current_benefits = "current_benefits",
   next_benefits = "next_benefits",
+  my_points = "my_points",
+  expiring_points = "expiring_points",
+  earn_and_burn = "earn_and_burn",
 }
 
 export enum ContentEntries {