feat(SW-353): dynamic rewards

components/Blocks/DynamicContent/Overview/Friend/index.tsx

@@ -1,12 +1,14 @@
-import { membershipLevels } from "@/constants/membershipLevels"
+import {
+  MembershipLevelEnum,
+  membershipLevels,
+} from "@/constants/membershipLevels"
 
+import MembershipLevelIcon from "@/components/Levels/Icon"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { isHighestMembership } from "@/utils/user"
 
-import MembershipLevel from "./MembershipLevel"
-
 import styles from "./friend.module.css"
 
 import type { FriendProps } from "@/types/components/myPages/friend"
@@ -20,7 +22,6 @@ export default async function Friend({
   if (!membership?.membershipLevel) {
     return null
   }
-  // @ts-expect-error: membershiplevel needs proper fix
   const isHighestLevel = isHighestMembership(membership.membershipLevel)
 
   return (
@@ -30,16 +31,14 @@ export default async function Friend({
           {formatMessage(
             isHighestLevel
               ? { id: "Highest level" }
-              : // @ts-expect-error: membershiplevel needs proper fix
-                { id: `Level ${membershipLevels[membership.membershipLevel]}` }
+              : { id: `Level ${membershipLevels[membership.membershipLevel]}` }
           )}
         </Body>
-        {membership ? (
-          <MembershipLevel
-            // @ts-expect-error: membershiplevel needs proper fix
-            level={membershipLevels[membership.membershipLevel]}
-          />
-        ) : null}
+        <MembershipLevelIcon
+          level={MembershipLevelEnum[membership.membershipLevel]}
+          height="110"
+          width="220"
+        />
       </header>
       <div className={styles.membership}>
         <Title className={styles.name} color="pale" level="h3">