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/MemberShipLevel/index.tsx

@@ -0,0 +1,36 @@
+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/membershipLevel"
+
+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/MyPages/Blocks/Overview/Friend/MemberShipLevel/membershipLevel.module.css

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

components/MyPages/Blocks/Overview/Friend/friend.module.css

@@ -16,11 +16,6 @@
   transform: rotate(-13deg) translate(0px, -15px);
 }
 
-.level {
-  height: 105px;
-  width: 219px;
-}
-
 .name {
   text-align: center;
 }

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

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

@@ -2,18 +2,40 @@ import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
+import { getMembership } from "@/utils/user"
 
 import styles from "./nextLevel.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
+import type { LangParams } from "@/types/params"
 
-export default async function NextLevel({}: UserProps) {
+export default async function NextLevel({
+  user,
+  lang,
+}: UserProps & LangParams) {
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
+
+  if (!membership?.membershipLevel) {
+    //  TODO: handle this case?
+    return null
+  }
+
+  const nextLevel = getMembershipLevelObject(
+    membership.membershipLevel,
+    lang,
+    "nextLevel"
+  )
+  if (!nextLevel) {
+    // TODO: already at top level, no next level exists
+    return null
+  }
   return (
     <section>
       <Body color="pale">{formatMessage({ id: "Next level" })}:</Body>
       <Title className={styles.nextLevel} color="pale" level="h3">
-        N/A
+        {nextLevel?.name || "N/A"}
         <BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
       </Title>
     </section>

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

@@ -14,15 +14,16 @@ export default async function Points({ user }: UserProps) {
     <section className={styles.points}>
       <article>
         <Body color="pale">{formatMessage({ id: "Total Points" })}</Body>
-        <Title color="pale" hideEmpty={false} level="h2">
+        <Title color="pale" level="h2">
           {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
       <article>
         <Body color="pale">
           {formatMessage({ id: "Points until next level" })}
+          {/* TODO */}
         </Body>
-        <Title color="pale" hideEmpty={false} level="h2">
+        <Title color="pale" level="h2">
           {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>

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

@@ -6,13 +6,14 @@ import Points from "./Points"
 import styles from "./stats.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
+import type { LangParams } from "@/types/params"
 
-export default function Stats({ user }: UserProps) {
+export default function Stats({ user, lang }: UserProps & LangParams) {
   return (
     <section className={styles.stats}>
       <Points user={user} />
       <Divider variant="default" />
-      <NextLevel user={user} />
+      <NextLevel user={user} lang={lang} />
     </section>
   )
 }

components/MyPages/Blocks/Overview/index.tsx

@@ -9,12 +9,14 @@ import Stats from "./Stats"
 import styles from "./overview.module.css"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+import type { LangParams } from "@/types/params"
 
 export default async function Overview({
   link,
   subtitle,
   title,
-}: AccountPageComponentProps) {
+  lang,
+}: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
   if (!user) {
     return null
@@ -25,7 +27,7 @@ export default async function Overview({
       <section className={styles.overview}>
         <Friend user={user} />
         <Divider className={styles.divider} />
-        <Stats user={user} />
+        <Stats user={user} lang={lang} />
       </section>
     </section>
   )