feat(WEB-220): label translations

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link"
 import { Lock } from "react-feather"
 
 import { serverClient } from "@/lib/trpc/server"
@@ -6,6 +5,8 @@ import { serverClient } from "@/lib/trpc/server"
 import Header from "@/components/MyPages/Blocks/Header"
 import Button from "@/components/TempDesignSystem/Button"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
+import Link from "@/components/TempDesignSystem/Link"
+import { getIntl } from "@/i18n"
 
 import styles from "./next.module.css"
 
@@ -17,7 +18,7 @@ export default async function NextLevelBenefitsBlock({
   link,
 }: AccountPageComponentProps) {
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
-
+  const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
       <Header title={title} subtitle={subtitle} link={link} />
@@ -26,7 +27,7 @@ export default async function NextLevelBenefitsBlock({
           <article key={perk.id} className={styles.card}>
             <Button type="button" disabled>
               <Lock height={16} />
-              Level up to unlock
+              {formatMessage({ id: "Level up to unlock" })}
             </Button>
             <div>
               <span className={styles.level}>As our {nextLevel}</span>{" "}
@@ -36,9 +37,9 @@ export default async function NextLevelBenefitsBlock({
         ))}
       </CardGrid>
       <div className={styles.buttonContainer}>
-        <Button intent="primary" asChild>
-          <Link href="#" className={styles.buttonText}>
-            Explore all levels and benefits
+        <Button asChild intent="primary">
+          <Link href="#">
+            {formatMessage({ id: "Explore all levels and benefits" })}
           </Link>
         </Button>
       </div>