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
2025-09-15 11:48:18 +00:00
parent 295e98a560
commit 0737f4fb78
29 changed files with 388 additions and 285 deletions
@@ -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>
+  )
+}
@@ -0,0 +1,30 @@
+.statsContainer {
+  display: flex;
+  padding: 0 var(--Space-x3);
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+.statItem {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.statItem:last-child {
+  text-align: right;
+}
+
+.statItem:has(.trophyIcon) {
+  align-self: end;
+}
+
+.label {
+  color: var(--Text-Secondary);
+}
+
+.value {
+  color: var(--Text-Accent-Primary);
+  word-break: break-all;
+}