fix: hydration error

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

@@ -46,8 +46,6 @@ export default function LoyaltyLevels() {
 }
 
 function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
-  const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
-
   let Level = null
   switch (level.level) {
     case 1:
@@ -77,6 +75,8 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
       notFound()
     }
   }
+  const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
+
   return (
     <article className={styles.card}>
       <header>
@@ -90,12 +90,12 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
         <Level color="red" />
       </header>
       <Title textAlign="center" level="h5">
-        {level.requiredPoints}{" "}
+        {pointsString}
         {level.requiredNights ? (
-          <Title textAlign="center" level="h5" color="red">
+          <span className={styles.redText}>
             {formatMessage({ id: "or" })} {level.requiredNights}{" "}
             {formatMessage({ id: "nights" })}
-          </Title>
+          </span>
         ) : null}
       </Title>
       <div className={styles.textContainer}>

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -34,6 +34,10 @@
   justify-content: center;
 }
 
+.redText {
+  color: var(--Base-Text-Accent);
+}
+
 .levelText {
   margin: 0;
 }