fix(i18n): prepare for Lokalise

components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx

@@ -1,7 +1,5 @@
 import { useIntl } from "react-intl"
 
-import useLang from "@/hooks/useLang"
-
 import styles from "./levelSummary.module.css"
 
 import type { LevelSummaryProps } from "@/types/components/overviewTable"
@@ -10,17 +8,29 @@ export default function LevelSummary({
   level,
   showDescription = true,
 }: LevelSummaryProps) {
-  const lang = useLang()
   const intl = useIntl()
+
+  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 or {nightsAmount, number} nights",
+      },
+      {
+        pointsAmount: level.required_points,
+        nightsAmount: level.required_nights,
+        highlight: (str) => <span className={styles.redText}>{str}</span>,
+      }
+    )
+  }
+
   return (
     <div className={styles.levelSummary}>
-      <span className={styles.levelRequirements}>
-        {level.required_points.toLocaleString(lang)}
-        {"p "}
-        {level.required_nights
-          ? `${intl.formatMessage({ id: "or" })} ${level.required_nights} ${intl.formatMessage({ id: "nights" })}`
-          : ""}
-      </span>
+      <span className={styles.levelRequirements}>{pointsMsg}</span>
       {showDescription && (
         <p className={styles.levelSummaryText}>{level.description}</p>
       )}