implement logic to select compared levels based on membershipLevel

components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx

@@ -2,11 +2,13 @@
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
+import { getMembership } from "@/utils/user"
 
 import type { User } from "@/types/user"
 
-export default function CopyButton({ membership }: Pick<User, "membership">) {
+export default function CopyButton({ memberships }: Pick<User, "memberships">) {
   function handleCopy() {
+    const membership = getMembership(memberships)
     console.log(`COPIED! (${membership ? membership.membershipNumber : "N/A"})`)
   }
 

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

@@ -2,6 +2,7 @@ import { GoodFriend } from "@/components/Levels"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import styles from "./friend.module.css"
 
@@ -9,6 +10,7 @@ import type { UserProps } from "@/types/components/myPages/user"
 
 export default async function Friend({ user }: UserProps) {
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <section className={styles.friend}>
       <header className={styles.header}>
@@ -26,7 +28,7 @@ export default async function Friend({ user }: UserProps) {
             {formatMessage({ id: "Membership ID" })}:
           </p>
           <p className={styles.membershipId}>
-            {user.membership ? user.membership.membershipNumber : "N/A"}
+            {membership ? membership.membershipNumber : "N/A"}
           </p>
         </div>
       </div>

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

@@ -1,5 +1,6 @@
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import Label from "../Label"
 
@@ -9,18 +10,19 @@ import type { UserProps } from "@/types/components/myPages/user"
 
 export default async function Points({ user }: UserProps) {
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <section className={styles.points}>
       <article>
         <Label>{formatMessage({ id: "Total Points" })}</Label>
         <Title color="pale" level="h2">
-          {user.membership ? user.membership.currentPoints : "N/A"}
+          {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
       <article>
         <Label>{formatMessage({ id: "Points until next level" })}</Label>
         <Title color="pale" level="h2">
-          {user.membership ? user.membership.currentPoints : "N/A"}
+          {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
     </section>

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,7 +1,10 @@
+import { get } from "http"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import Header from "@/components/MyPages/Blocks/Header"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import styles from "./currentPointsBalance.module.css"
 
@@ -15,6 +18,7 @@ async function CurrentPointsBalance({
 }: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <div>
       <Header title={title} link={link} subtitle={subtitle} />
@@ -23,7 +27,7 @@ async function CurrentPointsBalance({
         <h2>{`${formatMessage({ id: "Total points" })}*`}</h2>
         <p
           className={styles.points}
-        >{`${formatMessage({ id: "Points" })}: ${user.membership?.currentPoints || "N/A"}`}</p>
+        >{`${formatMessage({ id: "Points" })}: ${membership?.currentPoints || "N/A"}`}</p>
         <p className={styles.disclaimer}>
           {`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
         </p>