feat(WEB-220): label translations

components/MyPages/Blocks/Challenges/index.tsx

@@ -1,21 +1,26 @@
-import { _ } from "@/lib/translation"
-
 import Image from "@/components/Image"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import styles from "./challenges.module.css"
 
 import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"
 
-export default function Challenges({ journeys, victories }: ChallengesProps) {
+export default async function Challenges({
+  journeys,
+  victories,
+}: ChallengesProps) {
+  const { formatMessage } = await getIntl()
   return (
     <section className={styles.challenges}>
       <header className={styles.header}>
-        <Title level="h2">{_("Your Challenges Conquer & Earn!")}</Title>
+        <Title level="h2">
+          {formatMessage({ id: "Your Challenges Conquer & Earn!" })}
+        </Title>
       </header>
       <section className={styles.section}>
         <header>
-          <Title level="h3">{_("On your journey")}</Title>
+          <Title level="h3">{formatMessage({ id: "On your journey" })}</Title>
         </header>
         <section className={styles.journeys}>
           {journeys.map((journey) => (
@@ -28,7 +33,9 @@ export default function Challenges({ journeys, victories }: ChallengesProps) {
       </section>
       <aside className={styles.aside}>
         <header>
-          <Title level="h3">{_("Previous victories")}</Title>
+          <Title level="h3">
+            {formatMessage({ id: "Previous victories" })}
+          </Title>
         </header>
         <section className={styles.victories}>
           {victories.map((victory) => (