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/ProgressSection/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import { useIntl } from "react-intl"
+
+import { Progress } from "@scandic-hotels/design-system/Progress"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./progressSection.module.css"
+
+import type { ProgressCalculation } from "../../types"
+
+export interface ProgressSectionProps {
+  earned: number
+  progress: ProgressCalculation
+  toKeepCurrent?: number
+}
+
+export default function ProgressSection({
+  earned,
+  progress,
+  toKeepCurrent,
+}: ProgressSectionProps) {
+  const intl = useIntl()
+  const hasMarkerPosition = progress.markerPosition !== undefined
+
+  return (
+    <div
+      className={cx(styles.progressSection, {
+        [styles.hasMarker]: hasMarkerPosition,
+      })}
+    >
+      <div className={styles.progressContainer}>
+        <Progress
+          value={progress.percentage}
+          aria-label={intl.formatMessage(
+            {
+              defaultMessage:
+                "Level progress: {earned} of {total} points earned",
+            },
+            {
+              earned: intl.formatNumber(earned),
+              total: intl.formatNumber(progress.total),
+            }
+          )}
+        />
+
+        {hasMarkerPosition && toKeepCurrent && (
+          <div
+            className={styles.levelMarker}
+            style={{ left: `${progress.markerPosition}%` }}
+          >
+            <div className={styles.markerPin} />
+            <div className={styles.markerLine} />
+          </div>
+        )}
+      </div>
+
+      {hasMarkerPosition && toKeepCurrent && (
+        <div className={styles.markerLabelContainer}>
+          <span
+            className={styles.markerLabel}
+            style={
+              {
+                "--marker-pos": `${progress.markerPosition}%`,
+              } as React.CSSProperties
+            }
+          >
+            {intl.formatMessage(
+              {
+                defaultMessage:
+                  "{pointsAmount} <points>POINTS</points> <support>left to keep level</support>",
+              },
+              {
+                pointsAmount: (
+                  <Typography variant="Title/Overline/sm">
+                    <span>{intl.formatNumber(toKeepCurrent)}</span>
+                  </Typography>
+                ),
+                points: (str) => (
+                  <Typography variant="Title/Overline/sm">
+                    <span>{str}</span>
+                  </Typography>
+                ),
+                support: (str) => (
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
+                    <span>{str}</span>
+                  </Typography>
+                ),
+              }
+            )}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/progressSection.module.css

@@ -0,0 +1,66 @@
+.progressSection {
+  padding: 0 var(--Space-x3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.progressSection.hasMarker {
+  padding-bottom: var(--Space-x1);
+}
+
+.progressContainer {
+  position: relative;
+}
+
+.levelMarker {
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+
+.markerPin {
+  width: 6px;
+  height: 6px;
+  background: var(--Surface-Brand-Primary-1-OnSurface-Default);
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+.markerLine {
+  width: 1px;
+  height: 21px;
+  background: var(--Surface-Brand-Primary-1-OnSurface-Default);
+  margin-top: -3px;
+}
+
+.markerLabelContainer {
+  position: relative;
+  height: var(--Space-x3);
+  margin-top: var(--Space-x15);
+}
+
+.markerLabel {
+  position: absolute;
+  top: 0;
+
+  /* Define both edges - let browser calculate width automatically */
+  inset-inline-start: var(--Space-x3); /* respects card padding */
+  inset-inline-end: calc(100% - var(--marker-pos)); /* right edge under pin */
+
+  white-space: normal;
+  overflow-wrap: anywhere;
+  color: var(--Text-Secondary);
+  text-align: right;
+}
+
+@media screen and (min-width: 521px) {
+  .markerLabelContainer {
+    height: var(--Space-x2);
+  }
+}