feat(SW-353): dynamic rewards

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

@@ -1,36 +0,0 @@
-import { membershipLevels } from "@/constants/membershipLevels"
-
-import {
-  BestFriend,
-  CloseFriend,
-  DearFriend,
-  GoodFriend,
-  LoyalFriend,
-  NewFriend,
-  TrueFriend,
-} from "@/components/Levels"
-
-import styles from "./membershipLevel.module.css"
-
-import type { MembershipLevelProps } from "@/types/components/myPages/membership"
-
-export default function MembershipLevel({ level }: MembershipLevelProps) {
-  switch (level) {
-    case membershipLevels.L1:
-      return <NewFriend className={styles.level} color="pale" />
-    case membershipLevels.L2:
-      return <GoodFriend className={styles.level} color="pale" />
-    case membershipLevels.L3:
-      return <CloseFriend className={styles.level} color="pale" />
-    case membershipLevels.L4:
-      return <DearFriend className={styles.level} color="pale" />
-    case membershipLevels.L5:
-      return <LoyalFriend className={styles.level} color="pale" />
-    case membershipLevels.L6:
-      return <TrueFriend className={styles.level} color="pale" />
-    case membershipLevels.L7:
-      return <BestFriend className={styles.level} color="pale" />
-    default:
-      return null
-  }
-}

components/Blocks/DynamicContent/Overview/Friend/MembershipLevel/membershipLevel.module.css

@@ -1,4 +0,0 @@
-.level {
-  height: 105px;
-  width: 219px;
-}

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

components/Blocks/DynamicContent/Overview/Stats/Points/index.tsx

@@ -1,8 +1,7 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
+import { serverClient } from "@/lib/trpc/server"
 
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
-import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"
 
 import PointsContainer from "./Container"
@@ -14,10 +13,12 @@ export default async function Points({ user }: UserProps) {
   const { formatMessage } = await getIntl()
 
   const membership = getMembership(user.memberships)
-  const nextLevel = getMembershipLevelObject(
-    membership?.nextLevel as MembershipLevelEnum,
-    getLang()
-  )
+
+  const nextLevel = membership?.nextLevel
+    ? await serverClient().contentstack.loyaltyLevels.byLevel({
+        level: MembershipLevelEnum[membership.nextLevel],
+      })
+    : null
 
   return (
     <PointsContainer>