diff --git a/components/MyPages/AccountPage/Content.tsx b/components/MyPages/AccountPage/Content.tsx
index 7afbf55d7..e91dd0e74 100644
--- a/components/MyPages/AccountPage/Content.tsx
+++ b/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
case DynamicContentComponents.next_benefits:
return
+ case DynamicContentComponents.my_points:
+ return
+ case DynamicContentComponents.expiring_points:
+ return
+ case DynamicContentComponents.earn_and_burn:
+ return
default:
return null
}
diff --git a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
new file mode 100644
index 000000000..bf503d8dc
--- /dev/null
+++ b/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;
+}
diff --git a/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx b/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx
new file mode 100644
index 000000000..440cc6f11
--- /dev/null
+++ b/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 (
+
+
{_("Total points*")}
+
{`${_("Points")}: ${points}`}
+
+ {_("*Points may take up to 10 days to be displayed.")}
+
+
+ )
+}
+
+export default CurrentPointsBalance
diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css b/components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css
new file mode 100644
index 000000000..20432b2f7
--- /dev/null
+++ b/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;
+}
diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
new file mode 100644
index 000000000..694966524
--- /dev/null
+++ b/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 (
+
+
+
+
+ | {_("Arrival date")} |
+ {_("Description")} |
+ {_("Booking number")} |
+ {_("Transaction date")} |
+ {_("Points")} |
+
+
+
+
+ | 23 May 2023 |
+ Scandic Mölndal, Mölndal 2 nights |
+ 5123456576 |
+ 26 May 2023 |
+ 30000 |
+
+
+ | 23 May 2023 |
+ Scandic Mölndal, Mölndal 2 nights |
+ 5123456576 |
+ 26 May 2023 |
+ -30000 |
+
+
+
+
+
+ )
+}
+
+export default EarnAndBurn
diff --git a/components/MyPages/Blocks/Points/ExpiringPoints/expiringPoints.module.css b/components/MyPages/Blocks/Points/ExpiringPoints/expiringPoints.module.css
new file mode 100644
index 000000000..1a943c8ed
--- /dev/null
+++ b/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;
+}
diff --git a/components/MyPages/Blocks/Points/ExpiringPoints/index.tsx b/components/MyPages/Blocks/Points/ExpiringPoints/index.tsx
new file mode 100644
index 000000000..07815048c
--- /dev/null
+++ b/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 (
+
+
+
+ | {_("Arrival date")} |
+ {_("Points")} |
+
+
+
+
+ | 23 May 2023 |
+ 30000 |
+
+
+ | 23 May 2023 |
+ -15000 |
+
+
+
+ )
+}
diff --git a/constants/routes/authRequired.ts b/constants/routes/authRequired.ts
index 6a3b1aa08..dcfcc2bd3 100644
--- a/constants/routes/authRequired.ts
+++ b/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),
]
diff --git a/constants/routes/myPages.js b/constants/routes/myPages.js
index ab96ebcf9..595189d81 100644
--- a/constants/routes/myPages.js
+++ b/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`,
diff --git a/types/components/myPages/myPage/enums.ts b/types/components/myPages/myPage/enums.ts
index cc9c9f3a3..5385bc1ac 100644
--- a/types/components/myPages/myPage/enums.ts
+++ b/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 {