fix: loyalty levels fetch in rsc for mobile menu

fix: get loyalty level in rsc

fix: typo

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -24,6 +24,7 @@ export default function MyPagesMenu({
   membership,
   navigation,
   user,
+  membershipLevel,
 }: MyPagesMenuProps) {
   const intl = useIntl()
   const myPagesMenuRef = useRef<HTMLDivElement>(null)
@@ -57,6 +58,7 @@ export default function MyPagesMenu({
       {isMyPagesMenuOpen ? (
         <div className={styles.dropdown}>
           <MyPagesMenuContent
+            membershipLevel={membershipLevel}
             navigation={navigation}
             user={user}
             membership={membership}

components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -2,9 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { logout } from "@/constants/routes/handleAuth"
-import { trpc } from "@/lib/trpc/client"
 
 import { ArrowRightIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -23,18 +21,12 @@ export default function MyPagesMenuContent({
   navigation,
   toggleOpenStateFn,
   user,
+  membershipLevel,
 }: MyPagesMenuContentProps) {
   const intl = useIntl()
   const lang = useLang()
   const myPagesMenuContentRef = useTrapFocus()
 
-  const membershipLevel = trpc.contentstack.loyaltyLevels.byLevel.useQuery(
-    {
-      level: MembershipLevelEnum[membership?.membershipLevel!],
-    },
-    { enabled: !!membership?.membershipLevel }
-  ).data
-
   const membershipPoints = membership?.currentPoints
   const introClassName =
     membershipLevel && membershipPoints

components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -1,3 +1,4 @@
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { myPages } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
 
@@ -20,16 +21,24 @@ export default async function MyPagesMenuWrapper() {
     serverClient().user.safeMembershipLevel(),
   ])
 
+  const membershipLevel = membership?.membershipLevel
+    ? await serverClient().contentstack.loyaltyLevels.byLevel({
+        level: MembershipLevelEnum[membership.membershipLevel],
+      })
+    : null
+
   return (
     <>
       {user ? (
         <>
           <MyPagesMenu
+            membershipLevel={membershipLevel}
             membership={membership}
             navigation={myPagesNavigation}
             user={user}
           />
           <MyPagesMobileMenu
+            membershipLevel={membershipLevel}
             membership={membership}
             navigation={myPagesNavigation}
             user={user}

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -20,6 +20,7 @@ import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMobileMenu({
+  membershipLevel,
   membership,
   navigation,
   user,
@@ -62,6 +63,7 @@ export default function MyPagesMobileMenu({
           aria-label={intl.formatMessage({ id: "My pages menu" })}
         >
           <MyPagesMenuContent
+            membershipLevel={membershipLevel}
             membership={membership}
             navigation={navigation}
             user={user}