Merged in feat/LOY-354-L7-Progress-Card (pull request #2786)

Feat/LOY-354 L7 Progress Card

* feat(LOY-354): Add Trophy icon

* fix(LOY-354): include new tierPoints value

* feat(LOY-354): L7 Progress Level Card support

* refactor(LOY-354): Refactoring of component structure

* fix(LOY-354): Remove intl prop drilling

* fix(LOY-354): cleanup progress section code


Approved-by: Erik Tiekstra

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/StatsSection/index.tsx

@@ -0,0 +1,69 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getIntl } from "@/i18n"
+
+import styles from "./statsSection.module.css"
+
+interface StatsSectionProps {
+  earned: number
+  remaining?: number
+  showTrophy?: boolean
+}
+
+export default async function StatsSection({
+  earned,
+  remaining,
+  showTrophy = false,
+}: StatsSectionProps) {
+  const intl = await getIntl()
+  return (
+    <div className={styles.statsContainer}>
+      <div className={styles.statItem}>
+        <Typography variant="Title/Overline/sm">
+          <span className={styles.label}>
+            {intl.formatMessage({
+              defaultMessage: "Points Earned",
+            })}
+          </span>
+        </Typography>
+
+        <Typography variant="Title/md">
+          <span className={styles.value} aria-describedby="points-earned-desc">
+            {intl.formatNumber(earned)}
+          </span>
+        </Typography>
+      </div>
+
+      <div className={styles.statItem}>
+        {showTrophy ? (
+          <MaterialIcon
+            icon="trophy"
+            color="Icon/Interactive/Default"
+            size={36}
+            className={styles.trophyIcon}
+          />
+        ) : (
+          <>
+            <Typography variant="Title/Overline/sm">
+              <span className={styles.label}>
+                {intl.formatMessage({
+                  defaultMessage: "Left to level up",
+                })}
+              </span>
+            </Typography>
+
+            <Typography variant="Title/md">
+              <span
+                className={styles.value}
+                aria-describedby="points-remaining-desc"
+              >
+                {intl.formatNumber(remaining ?? 0)}
+              </span>
+            </Typography>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}