feat(WEB-220): label translations

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

@@ -1,22 +0,0 @@
-"use client"
-
-import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
-
-import styles from "./btn.module.css"
-
-export default function MembershipCardButton() {
-  function handleShowMembershipCard() {
-    console.log(`Showing membership card`)
-  }
-  return (
-    <Button
-      className={styles.membershipBtn}
-      onClick={handleShowMembershipCard}
-      type="button"
-    >
-      <span>Membership Card</span>
-      <Image alt="QR icon" height={20} src="/_static/icons/qr.svg" width={20} />
-    </Button>
-  )
-}

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

@@ -1,19 +1,19 @@
-import { _ } from "@/lib/translation"
-
 import { GoodFriend } from "@/components/Levels"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import styles from "./friend.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
 
-export default function Friend({ user }: UserProps) {
+export default async function Friend({ user }: UserProps) {
+  const { formatMessage } = await getIntl()
   return (
     <section className={styles.friend}>
       <header className={styles.header}>
         <BiroScript className={styles.levelLabel} color="pale">
-          Current level:
+          {formatMessage({ id: "Current level" })}:
         </BiroScript>
         <GoodFriend className={styles.level} color="pale" />
       </header>
@@ -22,7 +22,9 @@ export default function Friend({ user }: UserProps) {
           {user.name}
         </Title>
         <div className={styles.membershipContainer}>
-          <p className={styles.membershipId}>{_("Membership ID:")}</p>
+          <p className={styles.membershipId}>
+            {formatMessage({ id: "Membership ID" })}:
+          </p>
           <p className={styles.membershipId}>
             {user.membership ? user.membership.membershipNumber : "N/A"}
           </p>

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

@@ -1,7 +1,6 @@
-import { _ } from "@/lib/translation"
-
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import Label from "../Label"
 
@@ -9,13 +8,14 @@ import styles from "./nextLevel.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
 
-export default function NextLevel({}: UserProps) {
+export default async function NextLevel({}: UserProps) {
+  const { formatMessage } = await getIntl()
   return (
     <section>
-      <Label>{_("Next level")}:</Label>
+      <Label>{formatMessage({ id: "Next level" })}:</Label>
       <Title className={styles.nextLevel} color="pale" level="h3">
-        {_("Close friend")}
-        <BiroScript>{_("Coming up")}!</BiroScript>
+        N/A
+        <BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
       </Title>
     </section>
   )

components/MyPages/Blocks/Overview/Stats/NextLevel/nextLevel.module.css

@@ -7,6 +7,7 @@
 @media screen and (min-width: 768px) {
   .nextLevel {
     gap: var(--Spacing-x1);
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto auto;
+    justify-content: flex-start;
   }
 }

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

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