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>
+  )
+}