feat(WEB-220): label translations

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -2,9 +2,9 @@
 
 import { useParams } from "next/navigation"
 import { Check } from "react-feather"
+import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
-import { _ } from "@/lib/translation"
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
@@ -18,31 +18,38 @@ import styles from "./loyaltyLevels.module.css"
 import type { Level, LevelCardProps } from "@/types/components/loyalty/blocks"
 
 export default function LoyaltyLevels() {
-  const { lang } = useParams()
+  const params = useParams()
+  const lang = params.lang as Lang
+  const { formatMessage } = useIntl()
 
-  const { levels } = levelsData[lang as Lang]
+  const { levels } = levelsData[lang]
   return (
     <section className={styles.container}>
       <div className={styles.cardContainer}>
         {levels.map((level: Level) => (
-          <LevelCard key={level.tier} level={level} />
+          <LevelCard
+            key={level.tier}
+            formatMessage={formatMessage}
+            lang={lang}
+            level={level}
+          />
         ))}
       </div>
       <div className={styles.buttonContainer}>
         <Button intent="primary" asChild>
-          <Link href={"/compare-all-levels"}>{_("Compare all levels")}</Link>
+          <Link href={`/${lang}/compare-all-levels`}>
+            {formatMessage({ id: "Compare all levels" })}
+          </Link>
         </Button>
       </div>
     </section>
   )
 }
 
-function LevelCard({ level }: LevelCardProps) {
-  const { lang } = useParams()
-
+function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
   const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
   const qualifications = level.requiredNights
-    ? `${pointsString} ${_("or")} ${level.requiredNights} ${_("nights")}`
+    ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
     : pointsString
   return (
     <article className={styles.card}>