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
2024-06-18 13:14:09 +00:00
parent aca9221ea6
commit 9931d9edef
33 changed files with 473 additions and 357 deletions
@@ -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>
@@ -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>
@@ -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>
  )
 }