From 79b4c3fe12f71f48e0c632272f71c9e35f972f3d Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Thu, 29 Aug 2024 14:59:21 +0200
Subject: [PATCH] fix(SW-184): added membership level and points to menu

---
 app/globals.css                               |  2 +-
 .../Header/MainMenu/mainMenu.module.css       |  2 +-
 components/Current/Header/header.module.css   |  2 +-
 .../Header/MainMenu/MyPagesMenu/index.tsx     |  7 ++++-
 .../MainMenu/MyPagesMenuContent/index.tsx     | 28 +++++++++++++++----
 .../myPagesMenuContent.module.css             |  1 +
 .../MainMenu/MyPagesMobileMenu/index.tsx      |  2 ++
 components/Header/MainMenu/index.tsx          | 13 +++++++--
 components/Lightbox/Lightbox.module.css       |  4 +--
 .../SidePeek/sidePeek.module.css              |  8 +++---
 i18n/dictionaries/da.json                     |  2 +-
 i18n/dictionaries/en.json                     |  2 +-
 i18n/dictionaries/no.json                     |  2 +-
 types/components/header/myPagesMenu.ts        |  3 ++
 14 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 71027f9e7..06f34e25d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -102,7 +102,7 @@
   --max-width: 94.5rem;
   --max-width-content: 74.75rem;
   --max-width-text-block: 49.5rem;
-  --mobile-site-header-height: 70.047px;
+  --current-mobile-site-header-height: 70.047px;
   --max-width-navigation: 89.5rem;
 
   --main-menu-mobile-height: 75px;
diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css
index af3f3eee4..122abdc4f 100644
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/components/Current/Header/MainMenu/mainMenu.module.css
@@ -8,7 +8,7 @@
   top: 0;
   width: 100%;
   z-index: 99999;
-  height: var(--mobile-site-header-height);
+  height: var(--current-mobile-site-header-height);
 }
 
 .container {
diff --git a/components/Current/Header/header.module.css b/components/Current/Header/header.module.css
index 1e91a497c..91b5581a4 100644
--- a/components/Current/Header/header.module.css
+++ b/components/Current/Header/header.module.css
@@ -4,6 +4,6 @@
 
 @media screen and (max-width: 1366px) {
   .header {
-    height: var(--mobile-site-header-height);
+    height: var(--current-mobile-site-header-height);
   }
 }
diff --git a/components/Header/MainMenu/MyPagesMenu/index.tsx b/components/Header/MainMenu/MyPagesMenu/index.tsx
index 5d408cd32..8398ff840 100644
--- a/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -18,7 +18,11 @@ import styles from "./myPagesMenu.module.css"
 
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
-export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
+export default function MyPagesMenu({
+  membership,
+  navigation,
+  user,
+}: MyPagesMenuProps) {
   const intl = useIntl()
   const lang = useLang()
   const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
@@ -46,6 +50,7 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
           <MyPagesMenuContent
             navigation={navigation}
             user={user}
+            membership={membership}
             toggleOpenStateFn={toggleMyPagesMenu}
           />
         </div>
diff --git a/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
index dc70f3b68..40ab1e545 100644
--- a/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { logout } from "@/constants/routes/handleAuth"
 
 import { ArrowRightIcon } from "@/components/Icons"
@@ -11,12 +12,14 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { useTrapFocus } from "@/hooks/useTrapFocus"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
 
 import styles from "./myPagesMenuContent.module.css"
 
 import type { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMenuContent({
+  membership,
   navigation,
   toggleOpenStateFn,
   user,
@@ -25,20 +28,35 @@ export default function MyPagesMenuContent({
   const lang = useLang()
   const myPagesMenuContentRef = useTrapFocus()
 
+  const membershipLevel = membership?.membershipLevel
+    ? getMembershipLevelObject(
+        membership.membershipLevel as MembershipLevelEnum,
+        lang
+      )
+    : null
+  const membershipPoints = membership?.currentPoints
+  const introClassName =
+    membershipLevel && membershipPoints
+      ? `${styles.intro}`
+      : `${styles.intro} ${styles.noMembership}`
   if (!navigation) {
     return null
   }
 
   return (
     <nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
-      <div className={styles.intro}>
+      <div className={introClassName}>
         <Subtitle type="two" className={styles.userName}>
           {intl.formatMessage({ id: "Hi" })} {user.firstName}!
         </Subtitle>
-        <Caption className={styles.friendTypeWrapper}>
-          <span className={styles.friendType}>Loyal friend</span>
-          <span className={styles.friendPoints}>12 350 points</span>
-        </Caption>
+        {membershipLevel && membershipPoints ? (
+          <Caption className={styles.friendTypeWrapper}>
+            <span className={styles.friendType}>{membershipLevel.name}</span>
+            <span className={styles.friendPoints}>
+              {membershipPoints} {intl.formatMessage({ id: "points" })}
+            </span>
+          </Caption>
+        ) : null}
       </div>
 
       <ul className={styles.groups}>
diff --git a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
index 863a585f1..df0fbc8c9 100644
--- a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
+++ b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
@@ -68,6 +68,7 @@
   .myPagesMenuContent {
     padding: var(--Spacing-x2) var(--Spacing-x4);
   }
+  .intro.noMembership,
   .userName {
     display: none;
   }
diff --git a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
index 51700f72c..29a8023a1 100644
--- a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
@@ -17,6 +17,7 @@ import styles from "./myPagesMobileMenu.module.css"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMobileMenu({
+  membership,
   navigation,
   user,
 }: MyPagesMenuProps) {
@@ -45,6 +46,7 @@ export default function MyPagesMobileMenu({
           aria-label={intl.formatMessage({ id: "My pages menu" })}
         >
           <MyPagesMenuContent
+            membership={membership}
             navigation={navigation}
             user={user}
             toggleOpenStateFn={toggleMyPagesMobileMenu}
diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index 8b943aa05..44889584c 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -26,6 +26,7 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
     await serverClient().contentstack.myPages.navigation.get()
 
   const user = await serverClient().user.name()
+  const membership = await serverClient().user.membershipLevel()
 
   return (
     <div className={styles.mainMenu}>
@@ -46,8 +47,16 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
           <NavigationMenu items={navigationMenuItems} />
           {user ? (
             <>
-              <MyPagesMenu navigation={myPagesNavigation} user={user} />
-              <MyPagesMobileMenu navigation={myPagesNavigation} user={user} />
+              <MyPagesMenu
+                membership={membership}
+                navigation={myPagesNavigation}
+                user={user}
+              />
+              <MyPagesMobileMenu
+                membership={membership}
+                navigation={myPagesNavigation}
+                user={user}
+              />
             </>
           ) : (
             <Link
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css
index 494368206..484eba1d4 100644
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -3,7 +3,7 @@
 }
 
 .mobileGallery {
-  margin-top: var(--mobile-site-header-height);
+  margin-top: var(--current-mobile-site-header-height);
   height: 100%;
   position: relative;
   display: flex;
@@ -112,7 +112,7 @@
 }
 
 .fullViewContainer {
-  margin-top: var(--mobile-site-header-height);
+  margin-top: var(--current-mobile-site-header-height);
   background-color: var(--UI-Text-High-contrast);
   height: 100%;
   padding: var(--Spacing-x2);
diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css
index 0297f9d04..0ed9304c5 100644
--- a/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -1,10 +1,10 @@
 .sidePeek {
   position: fixed;
-  top: var(--mobile-site-header-height);
+  top: var(--current-mobile-site-header-height);
   right: auto;
   bottom: 0;
   width: 100%;
-  height: calc(100vh - var(--mobile-site-header-height));
+  height: calc(100vh - var(--current-mobile-site-header-height));
   background-color: var(--Base-Background-Primary-Normal);
   z-index: 100;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
@@ -24,7 +24,7 @@
 
 .overlay {
   position: absolute;
-  top: var(--mobile-site-header-height);
+  top: var(--current-mobile-site-header-height);
   bottom: 0;
   left: 0;
   right: 0;
@@ -46,7 +46,7 @@
   }
 
   to {
-    top: var(--mobile-site-header-height);
+    top: var(--current-mobile-site-header-height);
   }
 }
 
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 926556906..3d5ddcf19 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -137,7 +137,7 @@
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Indtast venligst et gyldigt telefonnummer",
   "Points": "Point",
-  "points": "Point",
+  "points": "point",
   "Points being calculated": "Point udregnes",
   "Points earned prior to May 1, 2021": "Point optjent inden 1. maj 2021",
   "Points may take up to 10 days to be displayed.": "Det kan tage op til 10 dage at få vist point.",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index a35660b45..4ced7fc92 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -142,7 +142,7 @@
   "Phone number": "Phone number",
   "Please enter a valid phone number": "Please enter a valid phone number",
   "Points": "Points",
-  "points": "Points",
+  "points": "points",
   "Points being calculated": "Points being calculated",
   "Points earned prior to May 1, 2021": "Points earned prior to May 1, 2021",
   "Points may take up to 10 days to be displayed.": "Points may take up to 10 days to be displayed.",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index abc05fc5c..57ea705a0 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -136,7 +136,7 @@
   "Phone is required": "Telefon kreves",
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Vennligst oppgi et gyldig telefonnummer",
-  "points": "Poeng",
+  "points": "poeng",
   "Points": "Poeng",
   "Points being calculated": "Poeng beregnes",
   "Points earned prior to May 1, 2021": "Opptjente poeng før 1. mai 2021",
diff --git a/types/components/header/myPagesMenu.ts b/types/components/header/myPagesMenu.ts
index 34f925afd..f7dd57df9 100644
--- a/types/components/header/myPagesMenu.ts
+++ b/types/components/header/myPagesMenu.ts
@@ -1,5 +1,7 @@
 import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
 
+import { MembershipLevel } from "@/utils/user"
+
 import type { User } from "@/types/user"
 
 type MyPagesNavigation = Awaited<
@@ -9,6 +11,7 @@ type MyPagesNavigation = Awaited<
 export interface MyPagesMenuProps {
   navigation: MyPagesNavigation
   user: Pick<User, "firstName" | "lastName">
+  membership: MembershipLevel | null | undefined
 }
 
 export interface MyPagesMenuContentProps extends MyPagesMenuProps {