fix(i18n): prepare for Lokalise

components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -6,7 +6,6 @@ import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import SectionWrapper from "../SectionWrapper"
 
@@ -35,9 +34,25 @@ export default async function LoyaltyLevels({
 }
 
 async function LevelCard({ level }: LevelCardProps) {
-  const lang = getLang()
   const intl = await getIntl()
-  const pointsString = `${level.required_points.toLocaleString(lang)} ${intl.formatMessage({ id: "points" })} `
+
+  let pointsMsg: React.ReactNode = intl.formatMessage(
+    { id: "{pointsAmount, number} points" },
+    { pointsAmount: level.required_points }
+  )
+
+  if (level.required_nights) {
+    pointsMsg = intl.formatMessage<React.ReactNode>(
+      {
+        id: "{pointsAmount, number} points <highlight>or {nightsAmount, number} nights</highlight>",
+      },
+      {
+        pointsAmount: level.required_points,
+        nightsAmount: level.required_nights,
+        highlight: (str) => <span className={styles.redText}>{str}</span>,
+      }
+    )
+  }
 
   return (
     <article className={styles.card}>
@@ -47,18 +62,15 @@ async function LevelCard({ level }: LevelCardProps) {
           color="primaryLightOnSurfaceAccent"
           tilted="large"
         >
-          {intl.formatMessage({ id: "Level" })} {level.user_facing_tag}
+          {intl.formatMessage(
+            { id: "Level {level}" },
+            { level: level.user_facing_tag }
+          )}
         </BiroScript>
         <MembershipLevelIcon level={level.level_id} color="red" />
       </header>
       <Title textAlign="center" level="h5">
-        {pointsString}
-        {level.required_nights ? (
-          <span className={styles.redText}>
-            {intl.formatMessage({ id: "or" })} {level.required_nights}{" "}
-            {intl.formatMessage({ id: "nights" })}
-          </span>
-        ) : null}
+        {pointsMsg}
       </Title>
       <div className={styles.textContainer}>
         {level.rewards.map((reward) => (