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

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

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