feat(SW-353): dynamic rewards

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -36,11 +36,10 @@ export default function MyPagesMenu({
   return (
     <div className={styles.myPagesMenu}>
       <MainMenuButton
-        className={styles.button}
         onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
       >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <Subtitle type="two" className={styles.userName}>
+        <Subtitle type="two">
           {intl.formatMessage({ id: "Hi" })} {user.firstName}!
         </Subtitle>
         <ChevronDownIcon

components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -5,6 +5,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"
@@ -12,7 +13,6 @@ 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"
 
@@ -28,12 +28,13 @@ export default function MyPagesMenuContent({
   const lang = useLang()
   const myPagesMenuContentRef = useTrapFocus()
 
-  const membershipLevel = membership?.membershipLevel
-    ? getMembershipLevelObject(
-        membership.membershipLevel as MembershipLevelEnum,
-        lang
-      )
-    : null
+  const membershipLevel = trpc.contentstack.loyaltyLevels.byLevel.useQuery(
+    {
+      level: MembershipLevelEnum[membership?.membershipLevel!],
+    },
+    { enabled: !!membership?.membershipLevel }
+  ).data
+
   const membershipPoints = membership?.currentPoints
   const introClassName =
     membershipLevel && membershipPoints
@@ -52,7 +53,7 @@ export default function MyPagesMenuContent({
         {membershipLevel && membershipPoints ? (
           <Caption className={styles.friendTypeWrapper}>
             <span className={styles.friendType}>{membershipLevel.name}</span>
-            <span className={styles.friendPoints}>
+            <span>
               {membershipPoints} {intl.formatMessage({ id: "points" })}
             </span>
           </Caption>
@@ -61,10 +62,7 @@ export default function MyPagesMenuContent({
 
       <ul className={styles.groups}>
         {navigation.menuItems.map((menuItem, idx) => (
-          <li
-            key={`${menuItem.display_sign_out_link}-${idx}`}
-            className={styles.group}
-          >
+          <li key={`${menuItem.display_sign_out_link}-${idx}`}>
             <Divider color="subtle" className={styles.divider} />
             <ul className={styles.menuItems}>
               {menuItem.links.map((link) => (