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

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