Merged in feat/membership-information (pull request #233)

Feat(WEB-307) Display correct membership information

* fix: fix typo

* chore: update fetch of user membership

* chore: update components to use api data

* chore: remove lang as static value

* fix: adapt to dev updates

* fix: adapt to code from dev

* fix: break out MembershipLevel into its a React component

* fix: add enum to zod validation

* refactor: rename tier to level

* refactor: remove unnecessary casts

* refactor: change toString() to hideEmpty=false

* refactor: remove toString()

* refactor: remove hideEmpty from title and subtitle

* fix: update currentLevel with data

* fix: fix from rebase


Approved-by: Michael Zetterberg

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

@@ -1,9 +1,12 @@
-import { GoodFriend } from "@/components/Levels"
+import { membershipLevels } from "@/constants/membershipLevels"
+
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getMembership } from "@/utils/user"
 
+import MembershipLevel from "./MemberShipLevel"
+
 import styles from "./friend.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
@@ -11,13 +14,21 @@ import type { UserProps } from "@/types/components/myPages/user"
 export default async function Friend({ user }: UserProps) {
   const { formatMessage } = await getIntl()
   const membership = getMembership(user.memberships)
+  if (!membership?.membershipLevel) {
+    return null
+  }
+
   return (
     <section className={styles.friend}>
       <header className={styles.header}>
         <BiroScript className={styles.levelLabel} color="pale">
           {formatMessage({ id: "Current level" })}:
         </BiroScript>
-        <GoodFriend className={styles.level} color="pale" />
+        {membership ? (
+          <MembershipLevel
+            level={membershipLevels[membership.membershipLevel]}
+          />
+        ) : null}
       </header>
       <div className={styles.membership}>
         <Title className={styles.name} color="pale" level="h3">