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 2023Scandic Mölndal, Mölndal 2 nights512345657626 May 202330000
23 May 2023Scandic Mölndal, Mölndal 2 nights512345657626 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 202330000
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 {