fix(SW-184): added membership level and points to menu

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;

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 {

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);
   }
 }

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>

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}>
+        {membershipLevel && membershipPoints ? (
-          <span className={styles.friendType}>Loyal friend</span>
+          <Caption className={styles.friendTypeWrapper}>
-          <span className={styles.friendPoints}>12 350 points</span>
+            <span className={styles.friendType}>{membershipLevel.name}</span>
-        </Caption>
+            <span className={styles.friendPoints}>
+              {membershipPoints} {intl.formatMessage({ id: "points" })}
+            </span>
+          </Caption>
+        ) : null}
       </div>
 
       <ul className={styles.groups}>

components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css

@@ -68,6 +68,7 @@
   .myPagesMenuContent {
     padding: var(--Spacing-x2) var(--Spacing-x4);
   }
+  .intro.noMembership,
   .userName {
     display: none;
   }

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}

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} />
+              <MyPagesMenu
-              <MyPagesMobileMenu navigation={myPagesNavigation} user={user} />
+                membership={membership}
+                navigation={myPagesNavigation}
+                user={user}
+              />
+              <MyPagesMobileMenu
+                membership={membership}
+                navigation={myPagesNavigation}
+                user={user}
+              />
             </>
           ) : (
             <Link

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);

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);
   }
 }
 

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.",

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.",

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",

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 {